使用 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%;
}