利用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; }
內容