垂直居中的几种方式

容器box内的居中：

公共部分css和html结构

.box{
  width: 200px;
  height: 200px;
  border: 1px solid #eee;
  box-sizing: border-box;
  font-size: 0;
}
.box div{
  width: 50px;
  height: 50px;
  background: #00cc00;
}



  




  
  

• 添加font-size:0主要是子元素是inline-block 元素时部分浏览器会对换行和空格产生一个“字符”做处理。

表格布局法

利用display:table-cell结合vertial-align:middle方法来实现垂直居中

.box{
  display: table-cell;
  vertical-align: middle;
}
.box div{
  margin: 0 auto;
}

行内块法

1.利用display: inline-block;结合vertial-align:middle;方法来实现垂直居中，父级元素的line-height需要设置为父级元素本身的高度。

.box{
  line-height: 200px;
  font-size: 0;
  text-align: center;
}
.box div{
  display: inline-block;
  vertical-align: middle;
}

2.原理同上，需新增一个空的span元素并将其height设为100%，

.box{
  text-align: center;
}
.box div{
  display: inline-block;
  vertical-align: middle;
}
.box .con{
  display: inline-block;
  width: 0;
  height: 100%;
  overflow: hidden;
  margin-left: -1px;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
}

flex布局

利用flex布局
1.父级align-items: center;justify-content: center;
2.子元素设置align-self: center;
3.子元素设置margin: auto;

.box{
  display: flex;
  align-items: center;
  justify-content: center;
}

.box{
  display: flex;
  justify-content: center;
}
.box div{
  align-self: center;
}

.box{
  display: flex;
}
.box div{
  margin: auto;
}

绝对定位

先把元素的左上角放置在（最近的具有定位属性的祖先元素）视窗的正中心，然后利用负外边距（或translate() 变形函数）把它向左、向上移动（移动距离相当于它自身宽高的一半），从而把元素的正中心放置在窗口的正中心
子元素不固宽高：

.box div{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

子元素固定宽高：

.box div{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

子元素固定宽高：

position:absolute;
top: calc(50% - 3em);
left: calc(50% - 9em);
width: 18em;
height: 6em;

视窗中居中

width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);