CSS 水平垂直居中后高度永远是宽度的一半CSS 垂直水平居中是再常见不过的场景了，实现方式也不止一种,在网上搜索水平垂

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

CSS 垂直水平居中是再常见不过的场景了，实现方式也不止一种,在网上搜索水平垂直居中可以找到实现水平垂直居中的8种方案、10种方案的实现。在实际应用上常用的可能还一直是固定的几种。

先来说说常用的水平垂直居中的几种方案：

水平垂直居中

flex 布局

操作起来比较简单，并且无论是否已知容器高度都可以设置
- display: flex; 写在父元素上
- justify-content主轴对齐方式（默认是横轴）
- align-items 纵轴对齐方式（默认是纵轴）
未知高度的定位

父元素相对定位，子元素绝对定位，若未知父元素高度：子元素 transform: translateY(-50%);
已知高度的定位

绝对定位 absolute + margin: auto
- 父元素相对定位，子元素绝对定位，并将子元素各个方向的距离都设0，再 margin: auto
- 父元素相对定位，子元素绝对定位，并将子元素的左+上的距离设为 50%、右+下的 margin 距离设为对应"-宽（高）度/2"
```
{
    width: 100px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -100px;
}
```

高度永远是宽度的一半

首先 Html 部分是这样的结构：

<div class="outer">
    <div class="inner">
        <div class="content">hello</div>
    </div>
</div>

CSS 样式的关键点是：

需要设置高度的容器，将其高度设置为0，下边距设置为50%，即：height: 0;padding-bottom: 50%;
文本部分 position:absolute;外层的容器 position:relative，否则文本的竖直位置不居中

完整样式代码如下：

.inner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    background: red;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

修改 padding-bottom 的值，可以看到高度发生了变化。padding-bottom 正是相对于宽度的设置，而 height 是相对于高度的。

动画.gif