transform、flex、grid实现水平垂直居中

实现水平垂直居中的方法有很多，在这里我只介绍三种种易用且常见的方法，这三种方法对于固定宽高和不定宽高都有效。

1、transform 方案

// html部分
<div class="container">
  <div class="box">box</div>
</div>

// css部分
.container{
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

2、flexbox 方案

// html部分
<div class="container">
  <div class="box">box</div>
</div>

// css部分
.container{
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: flex;            // 设置flex布局方式
  justify-content: center;  // 主轴居中
  align-items: center;      // 交叉轴居中
}
.box{
  // 子元素不用设置任何属性
}

 3、grid方案

// html部分
<div class="container">
  <div class="box">box</div>
</div>

// css部分
.container{ 
　　display: grid; // 设置grid布局方式 
　　justify-items: center; // 主轴居中 
　　align-items: center; // 交叉轴居中 
}