CSS实现水平垂直居中好用方法

父元素没有高度

父元素增加padding:10px 0;

代码如下

    .parent {
        width: 300px;
        border: 2px solid rgb(216, 41, 17);
        padding:10px 0;
    }
    .child {
        width: 100px;
        height: 100px;
        background-color: rgb(43, 183, 226);
        margin:auto;
    }

结果如下：

父元素有高度

一、Flex布局

在父元素上设置flex，并设置justify-content和align-items为center，使得子元素水平垂直居中，不需要设置子元素

.parent {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 300px;
            border: 2px solid rgb(216, 41, 17);
        }

结果如下：

• 优点：使用方便，不需要进行计算，只对父元素进行操作即可
• 缺点：浏览器兼容性较差，子元素使用float、position等将失效，和其他布局混合使用会相互影响

二、定位

使用absolute+margin ①

子绝父相+子元素四个方向都为0+margin：auto
前提条件：子元素宽高已知

 .parent {
            position: relative;
            width: 300px;
            height: 300px;
            border: 2px solid rgb(216, 41, 17);
        }
        
        .child {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0; 
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: rgb(43, 183, 226); 
        }

结果如下：

• 定位要设置父元素为相对定位，子元素为绝对定位
• 四个方向都设置为0，然后用margin控制居中

使用absolute+margin ②

使用margin负值进行相对移动，子绝父相+left、top+margin
前提条件：子元素宽高已知

 .parent {
            position: relative;
            width: 300px;
            height: 300px;
            border: 2px solid rgb(216, 41, 17);
}
        
.child {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top:-50px;
            width: 100px;
            height: 100px;
            background-color: rgb(43, 183, 226);
}

代码分析：

• left、top是相对父元素的宽高，所以移动到50%实际上多移动了自身的50%，使用margin负值将元素再往回移动自身宽高的一半

translate代替margin负值

使用margin负值的目的是将元素往回移动自身宽高一半，但是有时子元素并没有宽高，那我们怎么知道自身一半是多少呢?

• transform中translate移动就是相对自身宽高,使用translate即可代替margin的计算

transform:translate(-50%,-50%);

.child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background-color: rgb(43, 183, 226);
}

结果和上面一样滴！

三、table

table-cell+vertical-align+text-align

 .parent {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 300px;
            height: 300px;
            border: 2px solid rgb(216, 41, 17);
}
        
        .child {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: rgb(43, 183, 226);
}

结果如下：

• 优点：使用方便
• 缺点：占用了两个display，如果需要设置其他布局则会影响

使用table标签

不推荐。使用table有很多冗余标签而且实现方式类似上面，不如直接使用table-cell