前端
面试题
前端
面试题

元素水平垂直居中的方法有哪些?

居中是⼀个⾮常基础但⼜是⾮常重要的应⽤场景，实现居中的⽅法存在很多，可以将这些⽅法分成两个⼤类：

  • 居中元素（⼦元素）的宽⾼已知
  • 居中元素宽⾼未知

1.1 实现方式

实现元素⽔平垂直居中的⽅式：

  • 利用定位+margin:auto
  • 利用定位+margin:负值
  • 利用定位+transform
  • table布局
  • flex布局
  • grid布局

1.1.1 利用定位+margin:auto

<style>
      .father {
        width: 500px;
        height: 300px;
        border: 1px solid #0a3b98;
        position: relative;
      }
      .son {
        width: 100px;
        height: 40px;
        background: #f0a238;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    </style>
    <div class="father">
      <div class="son"></div>
    </div>

⽗级设置为相对定位，⼦级绝对定位，并且四个定位属性的值都设置了0，那么这时候如果⼦级没有设置宽⾼，则会被拉开到和⽗级⼀样宽⾼

这里⼦元素设置了宽⾼，所以宽⾼会按照我们的设置来显⽰，但是实际上⼦级的虚拟占位已经撑满了整个⽗级，这时候再给它⼀个 margin：auto 它就可以上下左右都居中了

1.1.2 利用定位+margin:负值

绝⼤多数情况下，设置⽗元素为相对定位， ⼦元素移动⾃⾝50%实现⽔平垂直居中

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

整个实现思路如下图所⽰：

pkt52md.png

  • 初始位置为⽅块1的位置
  • 当设置left、top为50%的时候，内部⼦元素为⽅块2的位置
  • 设置margin为负数时，使内部⼦元素到⽅块3的位置，即中间位置

这种⽅案不要求⽗元素的⾼度，也就是即使⽗元素的⾼度变化了，仍然可以保持在⽗元素的垂直居中位置，⽔平⽅向上是⼀样的操作

但是该⽅案需要知道⼦元素⾃⾝的宽⾼，但是我们可以通过下⾯ transform 属性进⾏移动

1.1.3 利用定位+transform

实现代码如下:

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

translate(-50%, -50%) 将会将元素位移⾃⼰宽度和⾼度的-50%

这种⽅法其实和最上⾯被否定掉的margin负值⽤法⼀样，可以说是 margin 负值的替代⽅案，并不需要知道⾃⾝元素的宽⾼

1.1.4 table布局

设置⽗元素为 display:table-cell，⼦元素设置 display: inline-block 。利⽤ vertical 和 text-align 可以让所有的⾏内块级元素⽔平垂直居中

<style>
      .father {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: skyblue;
        vertical-align: middle;
        text-align: center;
      }
      .son {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
      }
    </style>
    <div class="father">
      <div class="son"></div>
    </div>

1.1.5 flex弹性布局

还是看看实现的整体代码：

<style>
      .father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
      }
      .son {
        width: 100px;
        height: 100px;
        background: red;
      }
    </style>
    <div class="father">
      <div class="son"></div>
    </div>

css3 中了 flex 布局，可以⾮常简单实现垂直⽔平居中

这⾥可以简单看看 flex 布局的关键属性作⽤：

  • display: flex时，表⽰该容器内部的元素将按照flex进⾏布局
  • align-items: center表⽰这些元素将相对于本容器⽔平居中
  • justify-content: center也是同样的道理垂直居中

1.1.6 grid网格布局

<style>
      .father {
        display: grid;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 200px;
        background: skyblue;
      }
      .son {
        width: 10px;
        height: 10px;
        border: 1px solid red;
      }
    </style>
    <div class="father">
      <div class="son"></div>
    </div>

这⾥看到， gird ⽹格布局和 flex 弹性布局都简单粗暴

1.2 总结

上述⽅法中，不知道元素宽⾼⼤⼩仍能实现⽔平垂直居中的⽅法有：

  • 利⽤定位+margin:auto
  • 利⽤定位+transform
  • flex布局
  • grid布局

1.2.1 元素性质区分

根据元素标签的性质，可以分为：

  • 内联元素居中布局
  • 块级元素居中布局

1.2.2 内联元素居中布局

⽔平居中

  • ⾏内元素可设置：text-align: center
  • flex布局设置⽗元素：display: flex; justify-content: center 垂直居中
  • 单⾏⽂本⽗元素确认⾼度：height === line-height
  • 多⾏⽂本⽗元素确认⾼度：display: table-cell; vertical-align: middle

1.2.3 块级元素居中布局

⽔平居中

  • 定宽: margin: 0 auto
  • 绝对定位+left:50%+margin:负⾃⾝⼀半 垂直居中
  • position: absolute设置left、top、margin-left、margin-top(定⾼)
  • display: table-cell
  • transform: translate(x, y)
  • flex(不定⾼，不定宽)
  • grid(不定⾼，不定宽)，兼容性相对⽐较差