逩跑鍀小学生

CSS垂直居中的方法

CSS在实际开发中或者在面试的时候，都是一个绕不开的话题。而关于css经典问题“垂直居中”更是经常霸榜的存在。往往最容易的可能最容易忽略，本次分享多钟垂直居中的方案。

垂直居中分为俩种，一种是元素宽、高已知；一种是元素宽、高未知

一、宽高已知

1、absolute + margin auto

利用当前元素的 position: absolute; 和 margin: auto。将当前元素的绝对定位值都设置为 0，将 margin 设置为 auto，就可以实现元素的垂直居中。

.divBox{
  position: relative;
  width: 100px;
  height: 100px;
}


.item{
  width: 50px; 
  height: 50px;
  position:absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}

2、absolute + 负 margin

当前元素元素相对父元素绝对定位 50% ，然后再使用margin-left和margin-top负值来调整位置，达到实现效果

.divBox{
  position: relative;
  width: 100px;
  height: 100px;
}


.item{
  width: 50px; 
  height: 50px;
  position:absolute;
  top: 50%; left: 50%;
  margin-left: -25px;
  margin-top: -25px;
}

3、absolute + calc

calc是css3的新增特性，用来计算相关数值。

.divBox{
  position: relative;
  width: 100px;
  height: 100px;
}


.item{
  width: 50px; 
  height: 50px;
  position:absolute;
  top: 50%; left: 50%;
  margin-left: calc(50% - 25px);
  margin-top: calc(50% - 25px);
}

二、元素宽高未知

1、absolute + transform

利用css3的新特性 transform，来移动定位元素。

.divBox{
  position: relative;
  width: 100px;
  height: 100px;
}


.item{
  width: 50px; 
  height: 50px;
  position:absolute;
  top: 50%; left: 50%;
  transform: translate(50%, 50%);
}

2、line-height + vertical-align

设置当前元素为行内元素，设置父元素的 text-align: center; 实现水平居中

设置当前元素的 vertical-align: middle; 来实现垂直居中；

最后设置当前元素的 line-height: initial; 来继承父元素的line-height。

.divBox{
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.item{
  display: inline-block;
  vertical-align: middle;
  line-height: initial;
}