收集—— css實現垂直居中


Method1:

在父元素上設置display:table-cell;vertical-align:middle(父元素不能設置浮動)

Method2:

使用flex:父元素設置成display: flex; align-items:Center;

Method3:

display:flex和margin:auto

Method4:

使用絕對定位和負邊距  子元素設置為絕對定位,top,left都為父元素的50%,用margin-left,margin-top退回超出的自身寬高的一半(適用於已經確定內部子元素寬高)

Method5:

子元素使用絕對定位,方位都為0:(這種也是需要設置內部子元素寬高

position:absolute;
margin:auto;
top:
0;
left:
0;
bottom:
0;
right:
0;

Method6:

 css3 translate:(原理和方法4差不多)

position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align: center;

Method7:

使用偽元素進行占位

父元素設置偽元素,將其高設為100%,這樣同在一行子元素位置隨該偽元素變化而變化,當高度100%時,子元素就居中

.box:after{
content:
'';
width:
0;
height:
100%;
display:inline
-block;
vertical
-align:middle;
}

子元素必須設置為 vertical-align:middle;display:inline-block;

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: