常见的垂直水平居中的方法

垂直居中

方法一：使用padding
设置块级元素的padding-top和padding-bottom相等，注意是块级元素，行内元素设置padding-top和padding-bottom无效

<style>
.box{
  border: 1px solid;
}
.middle{
  padding: 40px 0;
}
</style>
<div class="box">
  <p class="middle">我要居中</p>
</div>

方法二：absolute定位
使用position: absolute实现，需要分成两种情况进行处理：
- 固定宽高
  top: 50%; margin-top: -(height/2); （margin-top上移自身宽度的一半）

<style>
.box{
  border: 1px solid;
  height: 200px;
  position: relative;
}
.box-middle{
  border: 1px solid blue;
  height: 50px;
  width: 50%;
  background-color: red;
  position: absolute;
  top: 50%;
  margin-top: -25px;
}
</style>
<div class="box">
  <div class="box-middle">
  </div>
</div>

不知道宽高
使用css的transform: translate(-50%, -50%)；前一个-50%是针对于水平方向，后一个是-50%是针对垂直方向

<style>
.box{
  border: 1px solid;
  height: 200px;
  position: relative;
}
.box-middle{
  border: 1px solid blue;
  background-color: red;
  position: absolute;
  top: 50%;
  transform: translate(0 ,-50%);  
}
</style>
<div class="box">
  <div class="box-middle">我要居中显示
  </div>
</div>

注意：使用该属性需要考虑兼容性

方法三: vertical-align: middle
注意： vertical-align只能作用在行内元素和display: table;的元素中；
vertical-align:middle居中原理：将行内元素框中点与父元素基线上方0.5ex处的一个点对齐，这里的1ex是相对于父元素的font-size定义的，大多数用户代理都把1ex处理为0.5em，middle往往是将元素的垂直中点与父元素基线上方的0.25em处的一个点对齐。
代码如下：

<style>
.box{
  height: 100px;
  border: 1px solid;
}
.box:after{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
span{
  vertical-align: middle;
}
</style>
<div class="box">
    <span>hhhahah </span>
  </div>

最关键的一点是：给父元素添加伪类，height:100%；

方法四：display: table; vertical-align: middle
可以通过给父元素设置display:table，垂直居中元素设置display:table-cell; vertical-align: middle;
也可以是给父元素设置display: table-cell; vertical-align: middle;

<style>
.box{
  height: 100px;
  border: 1px solid;
  display:table;
}
span{
  display: table-cell;
  vertical-align: middle;
}
或者
.box{
  height: 100px;
  border: 1px solid;
  display:table-cell;
vertical-align: middle;
}
</style>
<div class="box">
    <span>hhhahah </span>
  </div>

常见的垂直水平居中的方法

垂直居中

推荐阅读更多精彩内容