自适应水平垂直居中

自适应水平垂直居中

html

    <div class='box'>
        <div class='inner-box'>很多很多内容<br>很多很多内容</div>
    </div>

css

    .box {
        position: fixed;
        width: 100%;
        height: 100%;
        text-align: center;
    }
    .box::after {
        content: '';
        display: inline-block;
        height: 100%;
        width: 0;
        vertical-align: middle;
    }
    .inner-box {
        width: 200px;
        background: #eee;
        display: inline-block;
    }

• 关键在于after的高度设置为100%，撑开父级元素，然后用vertical-align: middle让元素居中

转载于:https://www.cnblogs.com/NKnife/p/9406952.html