如何做到元素相对于父级的垂直居中

方法一：直接上table

我们都知道，td里很容易做到左右垂直居中，并且没有任何的兼容性问题。

方法二：display:table-cell + vertical-align:middle

和table的原理比较像，把div模拟成一个td，不过好多低端浏览器不识别display:table-cell。

如果想兼容IE67，需要增加一个节点：

div{vertical-align:middle; display:table-cell; text-align:center; 200px; height:200px}

img{vertical-align:middle; }

i{ height:100%; display:inline-block; vertical-align:middle;}

以上各元素缺一不可。

方法三：定位50%+margin负值

没有兼容性问题。margin的值是自己宽高的一半。所以，此方法不适用未知宽高的元素。

方法四：display:flex + align-items:center

先指定父元素为伸缩盒模式，然后为其子元素指定为：align-items:center。目前伸缩盒只为高端浏览器支持，且flex本身是一个过渡属性，以chrome为例，为了兼容各种版本，最好一次写全，否则会带来不必要的麻烦（嗯，我亲身遇到过，P1级故障。因为涉及到布局，所以更应该慎重）：

display:-webkit-box;

display:-webkit-flex;

display:flex;

顺序是从旧到新，所以不能乱。

方法五：display:flex + margin:auto

在常规布局模式中，margin：auto仅能达到水平方向的左右居中，也就是说，margin:auto = margin:0 auto；但是，在flex环境下，margin:auto是真auto，上下左右都可以居中的。就是这么简单~~~

方法六：定位 + margin:auto

将父元素设置固定宽高以及positon:relative;然后将子元素设置为positon:absolute，并将其四个方位的值都置为0;同时指定margin:auto。兼容性，IE8+。

转载地址

http://blog.sina.com.cn/s/blog_448f59f301013axj.html