css垂直水平居中显示的解决办法

前端经常遇到居中定位的问题，今天总结集中水平垂直居中的方法，我常用的方法有5种，这5种方法针对不同情况做居中，这些方式只针对于块级元素的水平垂直居中，像文字居中的text-align:center,vertical-align:middle，块级元素的水平居中margin:0 auto不在讨论范围内

先预定一下html结构

<div class="parent">
  <div class="child"></div>
</div>

父级div设置样式

.parent{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
}

第一种情况是中间内容宽高不固定

（第一种）方法一

这种情况有两种方式解决，一是使用flex弹性布局，另一种是使用transform:translate的方式
flex布局设置方式

.parent{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

父级设置样式后子元素无论宽高如何都是居中显示的

（第二种）同样是使用flex布局

.parent{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  display:flex;
}
.child{
  margin:auto;
}

这种方式也是可以实现垂直水平居中的，而且child宽高固定不固定都会居中显示

（第三种）方法二

.parent{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
}
.child{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

translate设置百分比的时候与margin不同，它是针对自身计算的，是自身宽的的百分比，而margin的值为百分比时是针对父级元素计算的

第二种情况是中间内容宽高固定

（第四种）方法一

这种情况上面的三种实现方式同样适用，除此之外还有两种方式来实现

.parent{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
}
.child{
  position:absolute;
  top:50%;
  left:50%;
  width:100px;
  height:100px;
  margin-left:-50px;
  margin-top:-50px;
}

（第五种）方法二

.parent{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
}
.child{
  position:absolute;
  width:100px;
  height:100px;
  margin:auto;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

这5种情况基本能够满足我的工作需要，其实你只要了解一种就可能应付大部分水平居中的样式开发，只不过实际开发的时候情况千差万别，有的时候就不能使用这上面的某一种方案，这时就得考虑使用其他的方式去实现了