【CSS元素水平垂直居中的方法】

居中的大致情况

子元素的宽高已知

子元素的宽高未知

实现方式

需要子元素宽高：

• 利用定位+margin:负值
• table布局

不需要子元素宽高：

• 利用定位+margin:auto
• 利用定位+transform
• flex布局
• grid布局

详细方法介绍

利用定位+margin:auto

父级设置为相对定位(relative)，子级绝对定位(absolute)，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高

<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

利用定位+margin:负值

设置父元素为相对定位(relative)，子元素移动自身50%实现水平垂直居中，需要知道子元素自身的宽高，可以用transform方法替代

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-50px;
        margin-top:-50px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

利用定位+transform

这种方法其实和最上面被否定掉的margin负值用法一样，可以说是margin负值的替代方案，并不需要知道自身元素的宽高，利用translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

table布局

设置父元素为display:table-ceil，子元素设置display:inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中

<style>
    .father {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: skyblue;
        vertical-align: middle;
        text-align: center;
    }
    .son {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

flex弹性布局

使用display: flex，表示该容器内部的元素将按照flex进行布局，随后align-items: center表示这些元素将相对于本容器水平居中，再利用justify-content: center实现垂直居中

<style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

grid网格布局

grid网格布局和flex弹性布局都简单粗暴，使用display：grid，表示该容器内部的元素将按照grid进行布局，随后align-items: center表示这些元素将相对于本容器水平居中，再利用justify-content: center实现垂直居中

<style>
    .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }
</style>
<div class="father">
    <div class="son"></div>
</div>

 总结

以上就是我对于CSS元素水平垂直居中方法的理解，希望对于刚刚接触css的你有所帮助！