小盒子怎么在大盒子中水平并且垂直居中的4种方法

小盒子怎么在大盒子中水平并且垂直居中的4种方法！

1. 方法一

• 父元素相对定位，子元素绝对定位，绝对定位中上下左右都为0，再加上margin:auto

   .father {
      position: relative;
      width: 500px;
      height: 500px;
      margin: 100px auto;
      background-color: pink;
    }

    .son {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 300px;
      height: 300px;
      background-color: red;
    }

2. 方法二

• 子绝父相在加上transform(说明：transform是css3新属性，属于动画系列，里面translate是平移的意思，里面设置两个值是相对于自身元素大小来移动的！正值是向下和向右移动，负值则往相反方向移动)

  .father {
      position: relative;
      width: 500px;
      height: 500px;
      margin: 100px auto;
      background-color: pink;
    }

    .son {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 300px;
      background-color: red;
    }

3. 方法三：

• 这个方法相当于把块级元素转换为行内块元素来设置，具体设置方法我在代码中注释了出来；

  .father {
      /* 使元素呈单元格的样式显示 */
      display: table-cell;
      /* 水平局中 */
      text-align: center;
      /* 垂直居中 */
      vertical-align: middle;
    }

    .son {
      /* 把子盒子设置为行内块元素 */
      display: inline-block;
    }

4. 方法四

• 利用弹性盒子来设置，（前面有发布关于弹性盒子模型的学习），不用设置子元素

    .father {
      /* 将盒子模型转换为弹性盒子模型 */
      display: flex;
      /* 设置元素在主轴方向的水平居中 */
      justify-content: center;
      /* 设置元素在侧轴（垂直）方向的垂直居中 */
      align-items: center;
      width: 500px;
      height: 500px;
      margin: 100px auto;
      background-color: pink;
    }