使用 inline-block 水平垂直居中任意內容

挺好用的水平垂直居中任意內容代碼，而且支持度很高

 

html

<!-- 註釋用於去除 inline-block `間隙` -->
<div class="container"><!--
 --><div class="center">
            <h2>這個是居中標題</h2>
            <p>這裏是一些文字，文字</p>
     </div><!--
--></div>

css

.container {
    text-align: center;
    width: 100%;
    height: 300px;
}
.container:before,
.container:after    /* :after 能夠不須要 */
{
    display: inline-block;
    vertical-align: middle;
    content: '';
    height: 100%;
}
.center {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}