CSS垂直置中

absolute + top/left + tranform

利用top/left将子元素的左上角对齐中间，再利用transform平移元素自身50%的宽高达到置中。

.father
{
  border:1px solid black;
  height:100px;
  width:100px;
  position:relative;
}
.child
{
   border:1px solid black;
   height:50px;
   width:50px;
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%)
}

Flex

将父元素设定为Flex，同时使用justify-content让主轴置中，再使用align-items让次轴置中。

.father
{
  border:1px solid black;
  height:100px;
  width:100px;
  display:flex;
  justify-content: center;
  align-items: center;
}

relative + calc

利用calc计算出置中，父元素(100% - 自身高) / 2 = 垂直置中。
margin:auto 水平置中。

.father
{
  border:1px solid black;
  height:100px;
  width:100px;
  

}
.child
{
   border:1px solid black;
   height:30px;
   width:30px;
   position:relative; 
   top : calc((100% - 30px) / 2);
   margin:auto;
}