利用inline-block的等高特性,搭配:before 或 :after 來取得container的高度
可適用於未知高度的內容div
HTML:
<div class="container"> <div class="content">內容</div> </div>
CSS:
.container{
width:400px;
height:400px;
text-align:center;
border:1px solid #000;
}
.container:before{
height:100%;
display:inline-block;
vertical-align:middle;
content:'';
}
.content{
display:inline-block;
vertical-align:middle;
padding:10px;
background-color:#aaa;
}
內容