div垂直居中（巧用table、table-cell屬性）

今天無意中看到一個div垂直居中的方法，簡直太實用了！在父級元素設置table屬性，在子元素設置table-cell屬性和vertical-align的middle，可以很容易地使得div垂直居中

<style>

.contain{

width：100%;

height:100%;

display: table;

}

.content{

display: table-cell;

vertical-align: middle;

color: #fff;

position: relative;

}

</style>

<div class="contain">

? ? <div class="content">

? ? ? ? <h1>智慧園區</h1>

? ? ? ? <h3>SMART PARK</h3>

? ? ? ? <p>全方位提升一人為本,獨具特色，高效運行的美好、智慧園區</p>

? ? </div>

</div>

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。