1.單行內(nèi)容的居中
.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
2.父元素未設(shè)置高度和蚪,內(nèi)容居中
.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
3.子元素有固定高度采记,使用絕對(duì)定位的 div琴锭,把它的 top 設(shè)置為 50%氢哮,top margin 設(shè)置為負(fù)的 content 高度饰及。
#content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
4.使用表格的 vertical-align property 屬性
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}
5.子元素?position:absolute宝惰,有固定寬度和高度
#content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
}
6.使用css3的translate
css{position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);}
參考:www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html