用css设置水平居中，垂直居中和垂直水平居中

水平居中

• 行内元素

给父元素设置text-align:center。
若父元素不是块元素，则给父元素设置display:block即可

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
        text-align: center;
    }

    .son {
        background-color: red;
    }
</style>
<div class='father'>
    <span class="son">
        sssssss
    </span>
</div>

效果图：

• 块元素
  1、设置margin:0 auto让其行方向自适应分布。

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 0 auto;
    }
</style>
<div class='father'>
    <div class="son">
        sssssss
    </div>
</div>

效果图：

2、给父元素设置相对定位，子元素设置绝对定位，通过left:50%将子元素的左上角水平居中，然后通过margin-left:-50px（该值为子元素宽度的一半）将其整体水平居中。

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
        position: relative;
    }

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

3、同第二条，先给父元素设置相对定位，子元素设置绝对定位，通过left:50%将子元素的左上角水平居中，然后通过transform:translateX(-50%)将其整体水平居中。

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
        position: relative;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
<div class='father'>
    <div class="son">
        sssssss
    </div>
</div>

4、给父元素设置display:flex，采用flex布局的元素相当于一个容器，它的所有子元素自动成为容器成员。

该容器默认存在两根轴：水平方向的主轴以及垂直方向的交叉轴。

然后通过justify-content:center将其子元素在主轴方向上居中。

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
        display: flex;
        justify-content: center;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class='father'>
    <div class="son">
        sssssss
    </div>
</div>

垂直居中

• 行内元素
  给行内元素添加line-hight:200px（该值为父元素的高度）

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
    }

    .son {
        background-color: red;
        line-height: 200px;
    }
</style>
<div class='father'>
    <span class="son">
        sssssss
    </span>
</div>

效果图：

• 块元素
  1、同水平居中，先给父元素设置相对定位，子元素设置绝对定位，通过top:50%将子元素的左上角垂直居中，然后通过margin-top:-50px（该值为子元素高度的一半）将其整体垂直居中。

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
        position: relative;
    }

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

效果图：

2、同水平居中，先给父元素设置相对定位，子元素设置绝对定位，通过top:50%将子元素的左上角垂直居中，然后通过transform:translateY(-50%)将其整体垂直居中。

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
        position: relative;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<div class='father'>
    <div class="son">
        sssssss
    </div>
</div>

3、同水平居中，给父元素设置display:flex，采用flex布局的元素相当于一个容器，它的所有子元素自动成为容器成员。

该容器默认存在两根轴：水平方向的主轴以及垂直方向的交叉轴。

然后通过align-items:center将其子元素在交叉轴方向上居中。

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
        display: flex;
        align-items: center;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class='father'>
    <div class="son">
        sssssss
    </div>
</div>

垂直水平居中

1、垂直水平居中理所当然的是将水平居中和垂直居中合起来就行了。
先给父元素设置相对定位，子元素设置绝对定位，通过top:50%和left:50%将子元素的左上角垂直水平居中，然后通过transform:translate(-50%，-50%)将其整体垂直水平居中（translate中第一个参数即translateX，第二个参数即translateY）。

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
        position: relative;
    }

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

效果图：

2、先给父元素设置相对定位，子元素设置绝对定位，通过top:50%和left:50%将子元素的左上角垂直水平居中，然后通过margin-top:-50px（该值为子元素高度的一半）和margin-left:-50px（该值为子元素宽度的一半）将其整体垂直水平居中。

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
        position: relative;
    }

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

3、先给父元素设置相对定位，子元素设置绝对定位，通过top:0，left:0，right:0和bottom:0将子元素的左上角定于父元素的左上角，然后通过margin:auto将其整体垂直水平居中。

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
        position: relative;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>
<div class='father'>
    <div class="son">
        sssssss
    </div>
</div>

4、给父元素设置display:flex，采用flex布局的元素相当于一个容器，它的所有子元素自动成为容器成员。

该容器默认存在两根轴：水平方向的主轴以及垂直方向的交叉轴。

然后通过justify-content:center和align-items:center将其子元素在主轴方向和交叉轴方向上居中。

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: green;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class='father'>
    <div class="son">
        sssssss
    </div>
</div>