实现水平垂直居中的4种方法

1、第一类 absolute 和 margin

1.1 position: absolute 和 margin: auto

    .parent1 {
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        position: relative;
        line-height: 300px;
    }

    .child1 {
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

1.2 position: absolute 和 margin: - 一半宽度/高度

    .parent2 {
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        position: relative;
    }

    .child2 {
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
        position: absolute;
        left: 50%;
        top: 50%;
        /*自身宽度的一半*/
        margin-left: -75px;
        /*自身高度的一半*/
        margin-top: -75px;
    }

2、第二类 position: absolute 和 translate

    .parent3 {
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        position: relative;
    }
    .child3 {
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
        position: absolute;
        left: 50%;
        top: 50%;
        /*自身宽高的一半*/
        transform: translate(-50%, -50%);
    }

3、第三类 flex

    .parent4 {
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child4 {
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
    }

代码链接

水平垂直居中.html

参考链接

• margin
• transform
• transform-function
• CSS 弹性盒子布局
• flex-direction
• justify-content
• align-items