常用的垂直居中辦法
這里就隨便列幾個(gè)自己常用的昂勉，其實(shí)方法有很多，這里不談flex
1. 子元素高度固定
html:
<div class="parent">
<div class="child">balabala</div>
</div>
css:
.parent {
position: relative;
}
.child {
position: absolute;
height: 50px;
top: 0;
bottom: 0;
margin: auto 0;
}
當(dāng)然這只是一種方法土涝，還可以使用負(fù)margin等救巷。
2. 單行文本在父元素中垂直居中默责，父元素高度固定
html:
<div class="parent">
<p class="child">不超過一行的文本</p>
</div>
css:
.parent {
width: 500px;
height: 100px;
}
.child {
line-height: 100px;
}
3. 子元素高度不固定贬循，父元素高度固定
html:
<div class="parent">
<div class="child">不知道有多高</div>
</div>
css:
.parent {
height: 500px;
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
講重點(diǎn)
先丟個(gè)張?chǎng)涡翊罄械逆溄樱锩嬷v了很多display:table-cell相關(guān)的
假如我現(xiàn)在有一個(gè)div桃序，高度固定杖虾，里面有一段文本，差不多跟上面的第二個(gè)差不多媒熊，但是不知道到底有多少行奇适。如果用第二種方法，并且文本超過了一行芦鳍，那肯定超出父元素了嚷往，如圖
文本兩行，父元素高300px柠衅，line-height:300px
我們不可能用這么大的line-height去顯示文本皮仁，對(duì)吧，那我現(xiàn)在lihe-height設(shè)成2菲宴，嗨呀贷祈，不垂直居中了，好氣（當(dāng)然這種情況用transform的方法也能解決）
line-height為2
不廢話喝峦，拿起
display:table就開始干
.parent {
display: table;
height: 300px;
width: 100%;
}
.child {
line-height: 2;
display: table-cell; /* 類似于表格中的單元格 */
vertical-align: middle;
}
垂直居中势誊，完美
注意，此時(shí)的child已經(jīng)變味跟單元格類似谣蠢，所以margin什么的已經(jīng)沒用啦
margin無效
這可能是最簡單的場(chǎng)景了粟耻，稍微復(fù)雜一點(diǎn)，比如下面這種會(huì)經(jīng)常遇到
文章列表眉踱，圖片與右側(cè)文字對(duì)齊
轉(zhuǎn)載請(qǐng)注明：http://www.reibang.com/p/a7ee7dd60166
