元素居中的三种方法

1. 水平居中

display: inline/inline-block

将父元素(容器)设定text-align:center就可以左右居中

display: block

将元素本身的 margin-left和margin-right设定为auto,就可以左右居中.

2.垂直居中

<div class="black"></div>

• position居中

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

• flexbox居中

  body{	//父盒子
   	min-height: 100vh;
          display:flex;
  	justify-content:center;	        //水平居中
  	align-items:center;		//垂直居中
  }
  

• table-cell居中

  <div class="cell">
  	<div class="black"></div>
  </div>
  

  body{	//父盒子
      display:table;
      width:100%;
      min-height:100vh;
      margin:0;
  }
  .cell{
      display:teble-cell;
      vertical-align:middle;	//垂直居中
      text-align:center;		//水平居中
  }