position、table-cell、flex-box三种垂直(水平)居中技巧

一、首先是喜闻乐见的position方法,经典且万能,用法如下:

不需要水平居中可以去掉left和margin-left。

 划重点需要父元素和子元素都定义宽高,自适应是不可能自适应的,这辈子都不可能自适应的。

二、 display:table-cell能够使大小不固定的元素实现垂直居中布局,先来一发用法:

table-cell布局除了常见的实现不同宽高的图片垂直居中,还能做到自适应两栏布局(评论区等):

代码如下:

HTML部分:

CSS部分:

另外table-cell还能自动使多个子元素等宽分布,不需要自己计算宽度:

代码如下:

划重点:1、IE6/7不支持; 2、table-cell不支持margin属性(但支持padding),就很僵硬; 3、尽量不要和浮动/定位同时用,会破坏它的css属性。

三、如果你用ie我们就做不成朋友之弹性布局神器flex-box,用法如下:

原理是使flex-box的子元素(伸缩项目)沿着侧轴方向(当默认flex-direction:row时,侧轴就是垂直方向)居中对齐。

使用flex-wrap,还可以使伸缩容器里的内容折叠显示:

当调整视口宽度缩小到480px时:

代码如下:

浏览器兼容情况:

低版本浏览器兼容性解决:

display: -moz-box; /* 低版本firefox */

display:-webkit-box;/* IOS 6-,safari 3.1-6 */

——

display: -ms-flexbox; /* IE10  */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

display: -moz-flex; /* 较低版本firefox */
display: flex; /*IE11,  Chrome29+, FireFox 20+ */

转自:

https://www.cnblogs.com/guoyingjie/p/7217548.html

暂无评论

发表评论