CSS居中

一、 水平居中

行内元素：

父级元素设置：text-align:center

<style>
    div {
        text-align: center;
        width: 200px;
        height: 50px;
        background-color: lightcoral;
    }
</style>
<div>
    <span>Hello wolrd!</span>
</div>

宽度确定的块级元素

1. 哪个元素要实现水平居中，就对哪个元素设置margin:0 auto;

<style>
    .container {
        background-color: lightcoral;
        width: 200px;
        height: 200px;
    }
    
    .content {
        width: 50px;
        height: 50px;
        background-color: lightcyan;
        margin: 0 auto;
    }
</style>

<div class="container">
    <div class="content"></div>
</div>

2. 水平居中的元素设置：绝对定位和margin-left: -width/2，以及left:50%。 前提是父元素position: relative 父相子绝

<style>
    .container {
        margin: 0 auto;
        position: relative;
        background-color: lightcoral;
        width: 300px;
        height: 200px;
    }
    
    .content {
        position: absolute;
        width: 100px;
        height: 50px;
        background-color: lightcyan;
        margin-left: -50px;
        left: 50%;
    }
</style>
<div class="container">
    <div class="content"></div>
</div>

宽度未知的块级元素

1. 将块级元素设值为display:table，并对该元素设置margin:0 auto;

<style>
    div {
        display: table;
        margin: 0 auto;
        background-color: lightsalmon;
    }
</style>
<div>
    宽度未知的块级元素
</div>

2. 将块级元素设置为display：inline-block,父级元素设置text-align:center实现水平居中。

<style>
    .container {
        text-align: center;
        width: 200px;
        height: 200px;
        background-color: lightseagreen;
    }
    
    div {
        display: inline-block;
        background-color: lightsalmon;
    }
</style>
<div class="container">
    <div class="content">宽度未知的块级元素
</div>
</div>

3. 绝对定位 + transform+left:50%，translateX可以移动本身元素的50%。

<style>
    div {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background-color: lightseagreen;
    }
</style>
<div>没有确定宽度的块级元素</div>

4. 父级元素设置flex布局，使用justify-content:center

<style>
    body {
        display: flex;
        justify-content: center;
    }
    
    div {
        background-color: lightseagreen;
    }
</style>
<div>没有确定宽度的块级元素</div>

二、垂直居中

1. 纯文字类：利用line-height实现居中 设置height=line-height实现

<style>
    div {
        width: 100px;
        height: 100px;
        line-height: 100px;
        background-color: lightskyblue;
    }
</style>
<div>Hello world</div>

2. 父相子绝，通过设置父容器相对定位，子级设置绝对定位 + top: 0;bottom: 0; + margin:auto

<style>
    .container {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: lightskyblue;
    }
    
    .content {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: lime;
    }
</style>
<div class="container">
    <div class="content"></div>
</div>

3. 父级设置相对定位，子级设置绝对定位 + top:50% + transform：translateY(-50%)

<style>
    .container {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: lightskyblue;
    }
    
    .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background-color: lime;
    }
</style>
<div class="container">
    <div class="content"></div>
</div>

这里将transform：translateY(-50%)替换成：margin-top:-(height/2)，也可以实现垂直居中。

4. 弹性布局flex:父级设置display: flex + align-items:center

<style>
    .container {
        display: flex;
        align-items: center;
        width: 100px;
        height: 100px;
        background-color: lightskyblue;
    }
    
    .content {
        width: 50px;
        height: 50px;
        background-color: lime;
    }
</style>
<div class="container">
    <div class="content"></div>
</div>

5. 设置父元素的display:table-cell,并且vertical-align:middle

<style>
    .container {
        display: table-cell;
        vertical-align: middle;
        width: 100px;
        height: 100px;
        background-color: lightskyblue;
    }
    
    .content {
        width: 50px;
        height: 50px;
        background-color: lime;
    }
</style>
<div class="container">
    <div class="content"></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: translate(-50%, -50%)，也可以实现水平垂直居中。

3. 使用flex布局：父级元素设置display:flex + align-items:center + justify-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>