垂直居中問題
一般的做法是用 position 定位和 margin 負(fù)值來實(shí)現(xiàn)的针贬。這里介紹幾種不同的方法奕锌。
多行文字垂直居中
-
文字外部容器高度不固定 : 給多行文字上下設(shè)置 padding 值即可帝火。
以下是實(shí)現(xiàn)代碼和效果圖呛谜。
.container{
width: 200px;
background-color: #f2dede;
margin-top: 50px;
}
.inner-container{
padding: 10px 0;
}
.inner-container p{
text-align: center;
margin: 0;
}
<!-------------內(nèi)容高度不固定的垂直居中--------->
<div class="container">
<div class="inner-container">
<p>這里是文字</p>
<p>這里是文字</p>
<p>這里是文字</p>
<p>這里是文字</p>
<p>這里是文字</p>
<p>這里是文字</p>
<p>這里是文字</p>
</div>
</div>
多行文本垂直居中（高度不固定）
-
文字外部容器高度固定 : 首先給外容器用 height 給出一個(gè)定值溶诞，然后將其 display 屬性設(shè)置為 table-cell,接下來設(shè)置內(nèi)容凌箕，將內(nèi)容的 vertical-align 屬性設(shè)置為 middle拧篮。需要注意的是使用這種方法，外容器不能設(shè)置為浮動狀態(tài)陌知。
以下是實(shí)現(xiàn)代碼和效果圖他托。
.container{
width: 200px;
background-color: #f2dede;
margin-top: 50px;
}
.table-container{
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
<!-------------內(nèi)容高度固定的垂直居中(文字)--------->
<div class="container">
<div class="table-container">
<span>這里是文字</span>
<span>這里是文字</span>
<span>這里是文字</span>
<span>這里是文字</span>
<span>這里是文字</span>
</div>
</div>
多行文本垂直居中（高度固定）
內(nèi)容垂直居中
-
嵌套標(biāo)簽的垂直居中 : 嵌套標(biāo)簽的垂直居中實(shí)際上和上述的高度固定的居種方法是一樣的。
以下是代碼和效果圖仆葡。
.container{
width: 200px;
background-color: #f2dede;
margin-top: 50px;
}
.table-container{
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
ul{
display: inline-block;
padding: 0;
background-color: #2aabd2;
vertical-align: middle;
list-style: none;
}
ul li{
float: left;
height: 20px;
}
<!-------------內(nèi)容高度固定的垂直居中(嵌套標(biāo)簽)--------->
<div class="container">
<div class="table-container">
<ul>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
<li><a href="#">標(biāo)簽</a></li>
</ul>
</div>
</div>
內(nèi)容垂直居中（嵌套標(biāo)簽）
-
圖片垂直居中 : 同上赏参。
以下是代碼和效果圖。
.container-img{
width: 330px;
background-color: #f2dede;
margin-top: 50px;
}
.table-container-img{
width: 330px;
height: 250px;
display: table-cell;
vertical-align: middle;
}
<!-------------內(nèi)容高度固定的垂直居中(圖片)--------->
<div class="container-img">
<div class="table-container-img">
</div>
</div>
內(nèi)容垂直居中（圖片）
