纯CSS实现垂直居中的几种办法

m5k1umn

垂直居中是布局中非常平常的效果之一，为实现良好的兼容性，PC端实现垂直居中的办法通常是经过绝对定位，table-cell，负边距等办法。有了css3，针对移动端的垂直居中就更加多样化。

办法1：table-cell ====设置父元素

办法2：display:flex ====设置父元素

办法3：绝对定位和负边距【子元素固定宽高】===设置子元素

办法4：绝对定位和0====设置子元素

重视：这种办法跟上面的有些类似，然则这儿是经过margin:auto和top,left,right,bottom都设置为0实现居中，缺一不可，很神奇吧。不外这儿得确定内部元素的高度，能够用百分比，比较适合移动端。倘若无设置宽高，那样就默认宽高为100%；

办法5：translate【无设置宽高】====设置子元素

这实质上是办法3的变形，移位是经过translate来实现的。然则，办法三是得写出固定的宽高，而translate的办法不消

办法6：display:inline-block【父元素的伪类after和子元素都得设置】

==========display:inline-block; vertical-align:middle;

这种办法确实巧妙...经过:after来占位。

办法7：display:flex和margin:auto【父元素设置flex，子元素设置margin：auto】

重视：子元素能够是display：block；或是display：inline-block;但不能够为position：absolute；父元素有没相对定位都能够。

办法8：display:-webkit-box【父元素设置】

总结：设置父元素的办法：1、

table-cell（vertical-align:middle） 2、display:flex （justify-content:center; align-items:center;）3、办法8：display:-webkit-box【父元素设置】

设置子元素的办法：1、绝对定位和负边距【子元素固定宽高】（left，top,margin-left,margin-top）2、绝对定位和0====设置子元素（left,bottom,right,top为0，margin：auto；五者缺一不可）3、办法5：translate【无设置宽高】====设置子元素（和办法3的区别便是，不消设置子元素详细宽高）==transform:translate(-50%,-50%);top:50%;left:50%;

父元素和子元素都得设置1、display:inline-block【父元素的伪类after和子元素都得设置】

==========display:inline-block; vertical-align:middle;2、display:flex和margin:auto【父元素设置flex，子元素设置margin：auto】

情迷布拉格

你说得对，我们一起加油，未来可期。

1fy07h

外链发布社区 http://www.fok120.com/