css3的精彩实例收集

div水平垂直居中

只能说厉害了word哥,一个div水平垂直居中的布局怎么都弄不好,最后使用了三行代码搞定。分享下:

justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;

传统是做法:

div {
height:25px;
line-height:25px;
overflow:hidden;
}

这段代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了

 

该日志由 justcn 于2016年12月20日发表在 网络交流 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: css3的精彩实例收集 | 木易灵兮
关键字:

css3的精彩实例收集:等您坐沙发呢!

发表评论

= 10 + 5 (防止机器人评论