CSS 垂直居中那些事

一、父子元素高度确定

简单粗暴, 直接通过设置合适的 padding 或  margin 实现居中

<style>
  .p {
    padding: 20px 0;
    background: rgba(255, 0, 0, 0.1);
  }

  .c {
    width: 40px;
    height: 20px;
    background: blue;
  }
</style>
<div class="p">
  <div class="c"></div>
</div>

二、Flex(弹性) 布局

<style>
  .p {
    height: 100px;
    background: rgba(255, 0, 0, 0.1);

    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
  }

  .c {
    width: 40px;
    height: 20px;
    background: blue;
  }
</style>
<div class="p">
  <div class="c"></div>
</div>

三、Grid(网格) 布局

<style>
  .p {
    height: 100px;
    background: rgba(255, 0, 0, 0.1);
  
    display: grid;
    place-items: center; /* 直接水平垂直居中 */
  }

  .c {
    width: 40px;
    height: 20px;
    background: blue;
  }
</style>
<div class="p">
  <div class="c"></div>
</div>

四、子元素通过「绝对定位 + 偏移」实现居中

4.1 子元素高度不固定, 使用 transform 进行偏移

依据: 绝对定位百分比, 是相对于父元素进行计算、transform 百分比, 则是相对于自身进行计算

<style>
  .p {
    height: 100px;
    background: rgba(255, 0, 0, 0.1);
    position: relative;
  }

  .c {
    width: 40px;
    background: blue;

    top: 50%;
    position: absolute;
    transform: translateY(-50%);
  }
</style>
<div class="p">
  <div class="c">
    1111<br>2222
  </div>
</div>

4.2 子元素高度固定, 直接使用 margin 进行偏移

依据: 绝对定位百分比, 是相对于父元素进行计算

<style>
  .p {
    height: 100px;
    background: rgba(255, 0, 0, 0.1);
    position: relative;
  }

  .c {
    width: 40px;
    height: 40px;
    background: blue;

    position: absolute;
    top: 50%; /* 该百分比, 相对于父元素高度进行计算 */
    margin-top: -20px; /* 手动计算, 等于高度的一半 */
  }
</style>
<div class="p">
  <div class="c"></div>
</div>

4.3 「补充」margin、padding 百分比计算方式

margin、padding 上下两个方向的百分比, 相对于父元素自适应的一边进行计算, 默认情况下是根据父元素宽度 进行计算的 (因为块元素默认宽度自适应), 之所以要相对于自适应一边进行计算, 是为了避免在未设置宽高情况下, 子元素设置了边距, 引起容器尺寸的变化, 从而造成百分比重新计算, 引起死循环

<style>
  .p {
    width: 200px;
    height: 400px;
    background: rgba(255, 0, 0, 0.1);
  }

  .c {
    margin: 10%;  /* 上下左右边距都, 相对于父元素宽度: 20px */
    padding: 10%; /* 上下左右边距都, 相对于父元素宽度: 20px */
    display: inline-block;
    background: blue;
  }
</style>
<div class="p">
  <div class="c">
    
  </div>
</div>

通过 writing-mode: vertical-lr可元素内容 (文字、子元素) 从上到下垂直流动, 元素将从宽度自适应改为高度自适应, 这时其子元素 paddin margin 百分比将相对于父元素的高度进行计算

<style>
  .p {
    writing-mode: vertical-lr; /* 元素内容从上到下垂直流动、高度将自适应*/
    width: 200px;
    height: 400px;
    background: rgba(255, 0, 0, 0.1);
  }

  .c {
    margin: 10%;  /* 上下左右边距都, 相对于父元素宽度: 40px */
    padding: 10%; /* 上下左右边距都, 相对于父元素宽度: 40px */
    display: inline-block;
    background: blue;
  }
</style>
<div class="p">
  <div class="c">
  </div>
</div>

五、自适应特性 + margin: auto

众所周知 margin: auto, 可以很容器实现元素的水平居中, 而之所以能够实现水平居中, 是因为父元素宽度自适应, 只有在自适应情况下 margin: auto 才能正确计算出合适的值

<style>
  .p {
    width: 200px;
    height: 200px;
    background: rgba(255, 0, 0, 0.1);
  }

  .c {
    width: 40px;
    height: 40px;
    background: blue;
    margin: auto;
  }
</style>
<div class="p">
  <div class="c">
  </div>
</div>

从上面例子可以看出, margin: auto之所以能实现水平居中, 就是因为父元素宽度自适应了, 那么很自然就可以想到, 如果可以使父元素高度自适应, 那么我们就可以借用 margin: auto 实现元素的垂直居中

5.1 通过 writing-mode 使元素高度自适应

writing-mode属性定义了元素内容(文本、子元素)水平或垂直的排列方式, 其中 vertical-lr 属性值可使内容由水平流动改为垂直流动, 同时元素的宽度自适应也将变为高度自适应

<style>
  .p {
    width: 200px;
    height: 200px;
    background: rgba(255, 0, 0, 0.1);

    writing-mode: vertical-lr; /* 将子元素流向从水平改为垂直, 同时宽度自适应也将变为高度自适应 */
  }

  .c {
    width: 40px;
    height: 40px;
    background: blue;
    margin: auto;
  }
</style>
<div class="p">
  <div class="c">
  </div>
</div>

5.2 为子元素设置绝对定位, 使得在对应方向上具有自适应特性

<style>
  .p {
    width: 200px;
    height: 200px;
    background: rgba(255, 0, 0, 0.1);

    position: relative;
  }

  .c {
    width: 40px; /* 需要设置宽度 */
    height: 40px; /* 需要设置高度 */
    background: blue;
    
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
  }
</style>
<div class="p">
  <div class="c">
  </div>
</div>

六、子元素为文本或内联元素(包括内联块元素)

6.1 line-height 一把梭哈

对于父元素高度确定, 且子元素是单行文本或者内联元素, 可直接通过 line-height 实现居中

<style>
  .p {
    line-height: 80px;
    background: rgba(255, 0, 0, 0.1);
  }

  .inline-block {
    display: inline-block;
    height: 20px;
    width: 40px;
    background: blue;
  }
</style>
<div class="p">
  11111111111111111111
</div>
<br/>
<div class="p">
  <div class="inline-block"></div>
</div>

6.2 伪元素(::after) + vertical-align

通过伪类创建一个隐藏的内联元素, 高度为父元素高度, 并借用 vertical-align 使所有内容垂直居中

<style>
  .p {
    width: 200px;
    height: 200px;
    background: rgba(255, 0, 0, 0.1);
  }
  .p::after {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }

  .c {
    width: 40px; /* 需要设置宽度 */
    height: 40px; /* 需要设置高度 */
    background: blue;
    display: inline-block;
  }
</style>
<div class="p">
  <div class="c">
  </div>
</div>
<br>
<div class="p">
  111111111111111111111
</div>

6.3 display: table-cell + vertical-align

<style>
  .p {
    width: 200px;
    height: 200px;
    background: rgba(255, 0, 0, 0.1);
    display: table-cell;
    vertical-align: middle;
  }

  .c {
    width: 40px; /* 需要设置宽度 */
    height: 40px; /* 需要设置高度 */
    background: blue;
  }
</style>
<div class="p">
  <div class="c">
  </div>
</div>
<br>
<div class="p">
  111111111111111111111
</div>