前端面试之实现元素水平垂直居中

对于被面试的人，如果习惯了一手flex布局闯天下，本篇文章将帮您回忆基础
对于面试的人，可以开阔思路，提示要点，直奔主题，避免背诵式的问答
示例代码是react、CSS Module

描述的时候可以按照父元素...，子元素...，能否适用于不固定高度和宽度，是否适用于普通的文本元素以及多行，多个元素怎样的思路，优先级从上至下依次降低。

---

flex布局

适用于不固定高度和宽度，多个元素将并排显示，适用于普通的文本元素以及多行

        <div className={SelfStyle.flexLayout}>
          <div className={SelfStyle.child1}>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Aliquid necessitatibus quae animi dolores consectetur
          </div>
          <div className={SelfStyle.child2}></div>
        </div>

  .flexLayout {
    display: flex;

    border: 1px solid #000;

    justify-content: center;
    align-items: center;

    .child1 {
      width: 100px;

      border: 1px solid #000;
    }

    .child2 {
      width: 100px;
      height: 400px;

      border: 1px solid red;
    }
  }

align-content:center 和 align-items: center;的区别

align-content:center 在出现多行时，行于行之间不会出现间隙 演示地址

---

position:absolute + transform: translate(-50%, -50%);
适用于不固定高度和宽度，多个水平垂直的子元素将重叠，脱离了普通文档流，在文档中的位置不存在，注意于flex实现的区别，一个在父元素统一设定，一个是子元素自己设定，这决定了使用场景

        <div className={SelfStyle.positionWrap}>
          <div className={SelfStyle.child1}>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Aliquid necessitatibus quae animi dolores consectetur
          </div>
          <div>123</div>
        </div>

  .positionWrap {
    position: relative;

    height: 500px;

    border: 1px solid #000;

    .child1 {
      position: absolute;
      top: 50%;
      left: 50%;

      transform: translate(-50%, -50%);

      border: 1px solid #000;
    }
  }

用margin-left和margin-top代替transform: translate(-50%, -50%);会怎样
只适用于固定高度和宽度的元素，需要自己计算
translate 是根据元素自身的宽高计算的

---

line-height、text-align、 vertical-align这些，场景比较多
依据CSS盒模型，通过padding、margin 实现

---

position: absolute; + margin: auto;
如果不固定宽高将会充满容器，可以设置width和height，也可以设置top、left、right、 bottom，脱离了普通文档流，多个水平垂直居中的元素会重叠

        <div className={SelfStyle.positionWrap}>
          <div className={SelfStyle.child1}>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Aliquid necessitatibus quae animi dolores consectetur
          </div>
        </div>

  .positionWrap {
    position: relative;

    height: 500px;

    border: 1px solid #000;

    .child1 {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      width: 100px;
      height: 200px;
      margin: auto;

      border: 1px solid #000;
    }
  }

---

table布局
需要专门增加一层做单元格，适用于不定宽度和高度，垂直方向不限制子元素个数，适用于文本元素及多行

会撑大table容器，设置宽高无效

        <div className={SelfStyle.tableLayout}>
          <div className={SelfStyle.subWrap}>
            Lorem ipsum dolor sit
            <div style={{ width: 200 }} className={SelfStyle.child1}>
              Lorem ipsum dolor sit
            </div>
            <div className={SelfStyle.child1}>
              Lorem ipsum dolor sit
            </div>
            <div className={SelfStyle.child1}>
              Lorem ipsum dolor sit
            </div>
          </div>
        </div>

  .tableLayout {
    display: table;

    width: 400px;
    max-width: 500px;
    height: 200px;
    max-height: 10px;

    text-align: center;

    border: 1px solid #000;

    .subWrap {
      display: table-cell;

      vertical-align: middle;
    }

    .child1 {
      // width: 300px;
      margin: auto;

      border: 1px solid #000;
    }
  }

---

本文将持续更新

关注专题 前端便利店 https://www.jianshu.com/c/c3f77a86d9a5 ，帮您省时省力!