css水平垂直居中方式

前言

在前端应用中写css时我们经常需要用到文本、盒子、图片等垂直水平居中

以下都以此为案例html

<div class="parent">
            <div class="son">accumulate steadily</div>

</div>

1.

针对盒子里面的文本

代码如下（示例）：

             .son{
                width: 200px;
                height: 200px;
                background-color: aqua;
                text-align: center;//水平居中
                line-height: 200px;//垂直居中
            }

line-height居中的原理：其值为height时就可以时文本垂直居中，它底层的原理是除文本间的行距的一半使得文字居中。深层理解可以通过此网页

2.

代码如下（示例）：

            .parent{
                width: 600px;
                height: 600px;
                background-color: red;
                position: relative;
            }
            .son{
                width: 200px;
                height: 200px;
                background-color: aqua;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -100px;
                margin-top: -100px;
            }

3.

代码如下（示例）：

            .parent{
                width: 600px;
                height: 600px;
                background-color: red;
            }
            .son{
                width: 200px;
                height: 200px;
                background-color: aqua;
                position: relative;
                left: 200px;
                top: 200px;
            }

这种方式和上种方式相差不多，有着很明显的缺点就是还需自己手动计算一下其位移的位置

4.

            .parent{
                width: 600px;
                height: 600px;
                background-color: red;
                position: relative;
            }
            .son{
                width: 200px;
                height: 200px;
                background-color: aqua;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            }

这种方式相对于上两种就免于了计算的问题 在实际开发中非常便利

5.

            .parent {
                width: 600px;
                height: 600px;
                background-color: red;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .son {
                width: 200px;
                height: 200px;
                background-color: aqua;
            }

利用弹性盒子居中

---

总结

水平垂直居中的方式还有很多，在开发中合理运用各种情况下的居中就好。方式是不受限制的，受限制的只是思想。