自适应水平垂直居中

自适应水平垂直居中

html

    

        
很多很多内容
很多很多内容
    

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