垂直水平居中的方法

垂直水平居中

HTML解构

  <div class="container">
    <div class="box box_11">1</div>
  </div>
  <div class="container container_1">
    <div class="box box_1">2</div>
  </div>
。。。
  <div class="container container_7">
    <div class="box box_7">7</div>
  </div>

CSS的公共属性

    .container {
      position: relative;
      height: 100px;
      width: 500px;
      border: 1px solid red;
    }

    .box {
      width: 200px;
      height: 50px;
      border: 1px solid seagreen;
    }

使其垂直和水平方向的空间都成为可使用的区域

具体原因：后续博客会介绍

1.

    .box_1 {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }

2.

    .container_7 {
      display: grid;
    }

    .box_7 {
      /* 这个元素就是一个格式化高宽的元素 */
      margin: auto;
    }

3.

    .container_4 {
      /* 这个元素就是一个格式化高宽的元素  水平和垂直方向都'流'化*/
      display: flex;
    }

    .box_4 {
      margin: auto;
    }

绝对定位+transform

    .box_6 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
    }

flex布局

    .container_3 {
      display: flex;
      align-items: center;
      justify-content: center;
    }

grid布局

    .container_5 {
      display: grid;
      align-items: center;
      justify-items: center;
    }

table布局

 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

    .container_2 {
      display: table-cell;
      vertical-align: middle;
    }

    .box_2 {
      margin-left: auto;
      margin-right: auto;
    }