水平垂直居中

CSS实现块级元素 水平垂直居中的方法总结，建议只记忆四颗星的，其他略微了解即可！

先假设父元素和子元素如下：

<div class="father wrap">
    <div class="son vertical">
      我要垂直居中显示
    div>
div>

对应的原始css如下：

.father{
    width:300px;
    height:300px;
    border:1px solid red;
}
.son{
    width: 100px;
    height:100px;
    background-color: pink;
}

默认效果及要实现的效果如下图所示：

一、position:absolute 绝对定位方法

1.  上下左右值为0，margin:auto；        　　　　　　　　推荐指数4颗星！

.wrap{
  position: relative;
}
.vertical{
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

2. 先定位一半，再 transform: translate(-50%,-50%)  　　推荐指数4颗星！

.wrap{
  position: relative;
}
.vertical{
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%); /*相对于自身的宽和高*/
}

3. 知道子元素宽高，定位50%再减去宽高一半　　           推荐指数3颗星！

.wrap{
  position: relative;
}
.vertical{
  position: absolute;
  left:50%;
  top:50%;
  margin-left: -50px;       /* 要求知道子元素宽高 */
  margin-top: -50px;
}

4. 知道子元素宽高，calc计算定位百分比　　　　            推荐指数2颗星！

.wrap{
  position: relative;
}
.vertical{
  position: absolute;
  left:calc(50% - 50px);   /* 减号前后都要有空格 */
  top:calc(50% - 50px);
}

二、flex布局，现代布局方案　　　　

移动端非常推荐          推荐指数4颗星

.wrap{
  display: flex;
  align-items: center;
  justify-content: center;
}
.vertical{
/* 子元素啥都不用做 */
}

三、父级display:table-cell;text-align:center;vertical-align:middle;  子级display:inline-block;

推荐指数4颗星

.wrap{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.vertical{
  display: inline-block;
  text-align: left;/* 会继承文字水平居中 */
}

四、父级display:grid; 子级align-self:center; justify-self:center;

css新出的网格布局，兼容性不如flex，推荐指数3颗星

.wrap{
  display: grid;
}
.vertical{
  align-self: center;
  justify-self: center;
}

五、父级lineheight等于高度，子级display:inline-block;

推荐指数2颗星

.wrap{
  font-size: 0;        /*必须置0，否则有间隙*/
  text-align: center;
  line-height: 300px;
}
.vertical{
  display: inline-block;
  line-height: initial;     /* 取默认值，不要继承父级 */
  vertical-align: middle;   /* 垂直居中 */
  font-size: 16px;    /* 不继承父级 */
  text-align: left;   /* 不继承父级 */
}

 

总结：推荐使用 (子级两个position，父级两个display)

1. position:absolute + margin:auto

2. position:absolute + transform:translate(-50%,-50%)

3. 父级display:flex

4. 父级display:table-cell