面试官:元素水平垂直的方法有哪些?如果不设置宽高呢?一、背景 : 居中是一个非常基础但又是非常重要的应用场景，实现居中的

一、背景 :

居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多,下面就为各位小伙伴概述几种方法:

二、实现方式 :

实现元素水平垂直居中的方式 :

定位 + margin:auto
定位 + margin:负值
定位 + transform
flex布局
...

利用定位 + margin:auto

代码如下:

  <style>
    .father {
      width: 300px;
      height: 300px;
      border: 2px solid orangered;
      position: relative;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: #00a4ff;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
  <div class="father">
    <div class="son"></div>
  </div>

子绝父相,父盒子设置相对定位,子盒子设置绝对定位.并且4个定位属性都设置为0,若此时子盒子没有设置宽高,就会拉至父盒子一样宽高.
这里我们给子盒子设置了宽高,这时候再给一个maigin: auto,就可以让他居中显示了.

利用定位 + margin:负值

子绝父相,子元素移动 自身宽高 的一半实现水平垂直居中代码如下:

    .father {
      width: 300px;
      height: 300px;
      border: 2px solid orangered;
      position: relative;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: #00a4ff;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -50px; //切记是往回走自身的一半
      margin-top: -50px; //切记是往回走自身的一半
    }
  </style>
  <div class="father">
    <div class="son"></div>
  </div>

思路效果如下:

初始位置为图1的位置
当设置left、top为50%的时候，内部子元素为图2的位置
当设置margin值为负数的时候,子元素为图3的位置总结 : 这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作.
但是该方案需要知道子元素自身的宽高，但是我们可以通过下面transform属性进行移动

利用定位 + transform

这种方法可以说是margin负值的替代方法,并不需要直到自身盒子的宽高代码如下:

<style>
    .father {
      width: 300px;
      height: 300px;
      border: 2px solid orangered;
      position: relative;
    }

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

translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%

- flex布局

flex布局个人认为是最简单的,代码如下:

<style>
    .father {
      display: flex; //df 弹性布局
      justify-content: center; //jcc 主轴居中
      align-items: center; // aic 侧轴居中
      width: 200px;
      height: 200px;
      border: 2px solid orangered;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: #00a4ff;
    }
  </style>
  <div class="father">
    <div class="son"></div>
  </div>

这里我们可以看看flex布局的关键属性作用:

display:flex时,表示该容器内部的元素将按照flex进行布局
justify-content: center表示该容器内部的元素按照主轴居中主轴:在未修改主轴情况下,默认为x轴
align-items: center表示该容器内部的元素按照垂直居中

三、总结 :

以上是4中比较实用的让元素水平垂直的方法,当然,还有其他的方法.
希望可以帮助到暂时迷茫的小伙伴们~