前端便利店

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

2020-12-23  本文已影响0人  小遁哥

对于被面试的人,如果习惯了一手flex布局闯天下,本篇文章将帮您回忆基础
对于面试的人,可以开阔思路,提示要点,直奔主题,避免背诵式的问答
示例代码是reactCSS 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:centeralign-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-leftmargin-top代替transform: translate(-50%, -50%);会怎样
只适用于固定高度和宽度的元素,需要自己计算
translate 是根据元素自身的宽高计算的


line-heighttext-alignvertical-align这些,场景比较多
依据CSS盒模型,通过paddingmargin 实现


position: absolute; + margin: auto;
如果不固定宽高将会充满容器,可以设置widthheight,也可以设置topleftrightbottom,脱离了普通文档流,多个水平垂直居中的元素会重叠

        <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 ,帮您省时省力!

上一篇下一篇

猜你喜欢

热点阅读