元素水平垂直居中的N种方法

<div class="father">

    <div class="son"></div>

 </div>

1、利用定位+margin:auto

 .father {

  width: 500px;

  height: 300px;

  border: 1px solid #000;

  position: relative;

}

.son {

  width: 100px;

  height: 30px;

  background: #f0a238;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

}

父级设置为相对定位，自己绝对定位，并且四个定位属性的值都设置了0，这时如果子级没有设置宽高，则会被拉开到父级一样的宽高

这里的子级设置了宽高，所以宽高按照所设置的来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时再给它一个 margin:auto 它就可以实现上下左右都居中

2、利用定位+margin:负值 

 .father {

  width: 200px;

  height: 200px;

  background: skyblue;

  position: relative;

}

.son {

  width: 100px;

  height: 100px;

  background: lightcyan;

  position: absolute;

  top: 50%;

  left: 50%;

  margin-left: -50px;

  margin-top: -50px;

}

此方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作

但是此方案需要知道子元素自身的宽高，但是我们可以通过下面 transform 属性进行移动

3、利用定位+transform

 .father {

  width: 200px;

  height: 200px;

  background: skyblue;

  position: relative;

}

.son {

  width: 100px;

  height: 100px;

  background: lightcyan;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

 transform: translate(-50%, -50%) 将会将元素位移自身宽度和高度的-50%

这种方法可以说是 margin:负值 的替代方案，并不需要知道自身元素的宽高

4、table布局

.father {

  width: 200px;

  height: 200px;

  background: skyblue;

  display: table-cell;

  vertical-align: middle;

  text-align: center;

}

.son {

  width: 50px;

  height: 50px;

  background: lightcyan;

  display: inline-block;

}

设置父元素为 display: table-cell，子元素设置 display: inline-block。利用vertical-align: middle和 text-align: center 可以让所有的行内块元素水平居中

 5、flex弹性布局

.father {

  width: 200px;

  height: 200px;

  background: skyblue;

  display: flex;

  justify-content: center;

  align-items: center;

}

.son {

  width: 50px;

  height: 50px;

  background: lavenderblush;

}

css3种flex布局，可以简单实现垂直水平居中

flex的关键属性

display: flex时，表示该容器内部的元素将按照flex进行布局

align-items: center 表示这些元素将相对于本容器水平居中

justify-content: center 也是同样的道理垂直居中

6、grid网格布局

.father {

  width: 200px;

  height: 200px;

  background: skyblue;

  display: grid;

  justify-content: center;

  align-items: center;

}

.son {

  width: 50px;

  height: 50px;

  border: 1px solid linen;

}

 grid网格布局和flex弹性布局都简单粗暴

上述方法中，不知道元素宽高大小仍能实现水平垂直居中的方法有：

利用定位+margin:auto

利用定位+margin:负值

利用定位+transform

flex弹性布局

grid网格布局