css——如何实现水平垂直居中居中也是 css 中使用频率非常高的知识点，看下面的例题。使用多种方式实现绿色块的水平和

居中也是 css 中使用频率非常高的知识点，看下面的例题。

    <style>
      .wp {
        border: 1px solid orange;
        width: 300px;
        height: 300px;
      }

      .box {
        background: green;
        width: 100px;
        height: 100px;
      }
    </style>
	<body>
	    <div class="wp">
	      <div class="box">box</div>
	    </div>
	</body>

使用多种方式实现绿色块的水平和垂直居中。

一、居中元素定宽高

absolute + 负 margin

设置绝对定位后，自身的定位是相对于定位为非 static 父级的宽高。设置 left 和 top 后，再使 .box 反向偏移自身的宽高一半即可。

    .wp {
      position: relative;
    }
    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }

absolute + calc

与第一种原理相同，写法更简便。

    .root {
      position: relative;
    }

    .textBox {
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
    }

absolute + margin auto

依然使用绝对定位，但是设置各个方向的距离都是 0，此时配合 margin 为 auto，就实现了在各个方向上都居中了。

    .wp {
      position: relative;
    }
    .box {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

二、居中元素不定宽高

不定宽高的元素居中在开发中更为常见，解决的办法也更多。

    <style>
      .wp {
        border: 1px solid orange;
        width: 300px;
        height: 300px;
      }

      .box {
        background: green;
      }
    </style>

    <body>
      <div class="wp">
        <div class="box">box</div>
      </div>
    </body>

absolute + transform

该种方式与定宽高的第一种方式也非常相似，只不过不定宽高时无法反向位移自身的一半，这时就可以利用 CSS3 新增的 transform，transform 的 translate 属性也可以设置百分比，这个百分比是相对于自身的宽和高，在不定宽高时就可以使用。

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

lineheight

此种方法是把 box 设置为 inline-block 行内块元素，通过 text-align 可以做到水平居中，同时通过 vertical-align 做到垂直方向上的居中。

    .wp {
      line-height: 300px;
      text-align: center;
      font-size: 0px;
    }
    .box {
      font-size: 16px;
      display: inline-block;
      vertical-align: middle;
      line-height: initial;
    }

table

table 在以前经常被用来处理页面布局，但是随着前端的发展，table 渐渐的退出了大家的视野，不过用来处理居中依然好用。

    <style>
      .wp {
        text-align: center;
      }
      .box {
        display: inline-block;
      }
    </style>
    <table>
      <tbody>
        <tr>
          <td class="wp">
            <div class="box">test</div>
          </td>
        </tr>
      </tbody>
    </table>

css-table

如果感觉 table 方式代码复杂、产生冗余，那么就可以使用 css-table，采取 table 布局的特性效果，但是不使用 table 元素。

    .wp {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    .box {
      display: inline-block;
    }

flex

flex 是非常新的布局方式，实现居中也异常简单。

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

grid

目前最新的布局方式，功能强大，但受限于兼容性，没有得到广泛的使用。

    .wp {
      display: grid;
    }
    .box {
      align-self: center;
      justify-self: center;
    }

完结

如果遇到居中的需求可以参考以下优先级使用

PC 端有兼容性要求：宽高固定： absolute + 负 margin 宽高不固定： absolute + transform 和 css-table
PC 端无兼容性要求：flex grid
移动端：flex