css實現垂直居中的方法
阿新 • • 發佈:2018-11-10
垂直居中是佈局中十分常見的效果之一,為實現良好的相容性,PC端實現垂直居中的方法一般是通過絕對定位,table-cell,負邊距等方法。有了css3,針對移動端的垂直居中就更加多樣化。
方法1:table-cell
html結構:
<div class="box box1">
<span>垂直居中</span>
</div>
css:
.box1 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法2:display:flex
.box2 { display: flex; justify-content:center; align-items:Center; }
方法3:絕對定位和負邊距
.box3 {
position:relative;
}
.box3 span {
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
方法4:絕對定位和0
.box4 span { width: 50%; height: 50%; background: #000; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
這種方法跟上面的有些類似,但是這裡是通過margin:auto和top,left,right,bottom都設定為0實現居中,很神奇吧。不過這裡得確定內部元素的高度,可以用百分比,比較適合移動端。
方法5:translate
.box6 span{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
這實際上是方法3的變形,移位是通過translate來實現的。
方法6:display:inline-block
.box7 { text-align:center; font-size:0; } .box7 span { vertical-align:middle; display:inline-block; font-size:16px; } .box7:after { content:''; width:0; height:100%; display:inline-block; vertical-align:middle; }
這種方法確實巧妙...通過:after來佔位。
方法7:display:flex和margin:auto
.box8 {
display: flex;
text-align: center;
}
.box8 span {
margin: auto;
}
方法8:display:-webkit-box
.box9{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center
}
css3博大精深,可以實現很多創造性的效果,需要好好研究下。
今天又發現一種方法,現在補上:
方法9:display:-webkit-box
這種方法,在 content 元素外插入一個 div。設定此 div height:50%; margin-bottom:-contentheight;
。
content 清除浮動,並顯示在中間。
html:
<div class="floater"></div>
<div class="content"> Content here </div>
css:
.floater {
float:left;
height:50%;
margin-bottom:-120px;
}
.content {
clear:both;
height:240px;
position:relative;
}
優點:
適用於所有瀏覽器
沒有足夠空間時(例如:視窗縮小) content 不會被截斷,滾動條出現
缺點:
唯一我能想到的就是需要額外的空元素了(也沒那麼糟,又是另外一個話題)