行内/块级元素水平垂直居中总结

关于居中，因为使用率非常高，所以之前学习过程中就有总结，但是觉得现在由于经验的增加，可能更有些体会，故重新整理，以备后查！

不废话，上代码系列（所有案例都以HTML为基准）

HTML

  
    

      
块级元素水平垂直居中
    
  

基准css

  .box-all{
    border: 1px solid green;
    width: 800px;
    height: 800px;
    margin: 0 auto;
  }
  .box1{
    width: 300px;
    height: 300px;
    border: 1px solid red;
  }

方法一：table-cell法

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

方法二：定位浮动法（已知宽高）

.box-all{
  position: relative;
}
.box1{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
}

方法三：定位浮动法（未知宽高）

.box-all{
  position: static;
}
.box1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
}

方法四：十面埋零

.box-all{
  position: relative;
}
.box1{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin:auto;
}

方法五：纯html实现（table自带功能）

HTML：

方法六：

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

基本点：

块级元素水平居中：

margin : 0 auto;

行内元素水平居中：

text-align : center;

之前总结的块级元素居中链接