CSS

居中

.container{
  height:200px;
  width:200px;
  display:flex;
  justify-content: center;            
  align-items: center;  
}

.content{
  /*有宽度和高度  */
  height:100px;
  width:100px;
}

.container{
  width: 300px;            
  height: 300px;            
  position: relative;    
}

/*元素宽度已知  */
.content{
  width: 100px;            
  height: 100px;            
  position: absolute;            
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px; 
}
/*元素宽度未知  */
.content{
  position: absolute;            
  top: 50%;            
  left: 50%;            
  transform: translate(-50%, -50%); 
}

.container{
  width: 300px;
  height: 300px;

  /*此元素会作为一个表格单元格显示
  （类似 <td> 和 <th>）*/
  display: table-cell;
  /*垂直居中 */
  vertical-align: middle;
  /*水平居中*/
  text-align: center;
}

.content{
  /*可以是块元素也可以不是  */
}