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

水平居中

行内元素

行内元素的父级元素设置text-align:center

<style>
    .parent {
        text-align: center;
    }
</style>
  
<div class="parent">
    <span>Hello world!</span>
</div>

宽度确定的块级元素

1. 哪个元素要实现水平居中，就对那一个元素使用margin：0 auto;

<style>
    .outer {
        width: 400px;
        height: 400px;
        background-color: bisque;
    }
    .content {
        background-color: skyblue;
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }
</style>
<div class="outer">
    <div class="content"></div>
</div>

2. 父级元素position: relative，子元素绝对定位 + margin-left: -(width/2) + left:50%

<style>
    .parent{
        position: absolute;
        width: 400px;
        height: 400px;
        background-color: bisque;
    }
    .child {
        position: relative;
        background-color: skyblue;
        width: 200px;
        height: 200px;
        left: 50%;
        margin-left: -100px;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

宽度未知的块级元素

1. display:table + margin左右auto

<style>
    .content {
        display: table;
        margin: 0 auto;
        background-color: red;
    }
</style>

<div class="content">
    宽度未知的块级元素
</div>

2. 父级元素设置text-align: center;，子级元素设置display: inline-block;

<style>
    .parent {
        text-align: center;
    }
    
    .child{
        display: inline-block;
    }
</style>

<div class="parent">
    <div class="child">宽度未知的块级元素</div>
</div>

3. 绝对定位 + transform: translateX(-50%) + left:50%

<style>
    .content {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>

<div class="content">hello world</div>

4. flex布局 + justify-content:center

<style>
    .content {
        display: flex;
        justify-content: center;
    }
</style>

<div class="content">hello world</div>

垂直居中

1. 纯文字类：用line-height：height实现垂直居中

<style>
    .content {
        background-color: skyblue;
        width: 200px;
        height: 200px;
        line-height: 200px;
    }
</style>

<div class="content">
    hello world
</div>

效果图：

2. 父级元素设置相对定位
子级元素设置绝对定位 + 上下为0 + margin：auto

<style>
    .parent {
        width: 400px;
        height: 400px;
        position: relative;
        background-color: skyblue;
    } 
    .child {
        width: 200px;
        height: 200px;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        background-color: salmon;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

3. 父级元素设置相对定位
   子级元素设置绝对定位 + top:50% + margin-top:-(height/2)

<style>
    .parent {
        width: 400px;
        height: 400px;
        position: relative;
        background-color: skyblue
    }
    .child {
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: salmon;
        top: 50%;
        margin-top: -100px;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

补充：这里将margin-top:-(height/2)替换成：transform：translateY(-50%)，也可以实现垂直居中。
3. 父级元素设置display: table-cell + vertical-align: middle

<style>
    .parent {
        width: 400px;
        height: 400px;
        display: table-cell;
        vertical-align: middle
        background-color: skyblue;
    }
    .child {
        width: 200px;
        height: 200px;
        background-color: salmon;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

4. 父级元素设置display:flex + align-items:center

<style>
    .parent {
        width: 400px;
        height: 400px;
        display: flex;
        align-items: center;
        background-color: skyblue;
    }
    .child {
        width: 200px;
        height: 200px;
        background-color: salmon;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

最终效果图：

水平垂直居中

1. 父级元素设置相对定位
   子级元素设置绝对定位 + 上下左右为0 + margin：auto

<style>
    .parent {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: skyblue;
    }
    .child {
        position: absolute;
        background-color: pink;
        width: 200px;
        height: 200px;
        bottom: 0;
        right: 0;
        top: 0;
        left: 0;
        margin: auto;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

2. 父级元素设置相对定位
   子级元素设置绝对定位 + top、left:50% + margin-top:-(height/2) + margin-left:-(width/2)

<style>
    .parent {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: skyblue;
    }
    .child {
        position: absolute;
        background-color: pink;
        width: 200px;
        height: 200px;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

补充：这里将margin-top:-(height/2)和margin-left:-(width/2)替换成：transform：translateY(-50%)以及transform：translateX(-50%)，也可以实现水平垂直居中。
3. 父级元素设置display:flex + align-items:center + jusitify-content:center

<style>
    .parent {
        display: flex;
        width: 400px;
        height: 400px;
        background-color: skyblue;
        justify-content: center;
        align-items: center;
    }    
    .child {
        background-color: pink;
        width: 200px;
        height: 200px;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

最终效果图：