垂直居中是布局中非常平常的效果之一,为实现良好的兼容性,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】
|