div水平垂直居中的方法

方法一、

绝对定位方法

若当前div的宽高未知，可使用transform: translate(-50%, -50%)。给父级元素使用相对定位,当前元素使用绝对定位，left,top均为50%，那么子元素的中心点就会在父级元素的中心，再将子元素偏移自身宽高的一半，即可水平垂直居中。
代码示例：

布局：

 

      这里是父容器
      

        这里是子容器
      
 

父容器样式：

.father {
        width: 200px;
        height: 200px;
        background: yellowgreen;
        /*重点*/
        position: relative;
      }

子容器样式：

.child {
        width: 100px;
        height: 100px;
        background: slateblue;
        /*重点*/
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

效果图：

方法二、

若当前div的宽高已知，假设宽高均为600px。

div绝对定位水平垂直居中【margin 负间距】， 这或许是当前最流行的使用方法。
给当前元素一个绝对定位，在将定位点移动到父元素中心点之后，在将自身偏移本身宽高的一半，和方法一很类似

布局：

    
这里是div
  

样式：

.center {
        width: 600px;
        height: 600px;
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -300px;
        margin-top: -300px;
      }

效果图：

方法三、

div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】

给当前元素使用 position: absolute，上下左右皆为 0 ，结合 margin: auto，可使得其水平垂直居中

代码示例：

布局：

 
    
这里是div
  

样式：

.center {
        width: 200px;
        height: 200px;
        background: yellowgreen;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }

效果图：

方法四、

flex布局方法：当前div的父级添加flex css样式

布局：

 

      
这里是子div
 

父元素样式：

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

子元素样式：

.child {
        width: 100px;
        height: 100px;
        background: slateblue;
      }

效果图：

方法五、

table-cell实现水平垂直居中: table-cell middle center组合使用

布局：

 

      
水平垂直居中
 

样式：

 .table-cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 240px;
        height: 180px;
        background: yellowgreen;
      }

方法六、

绝对定位：calc() 函数动态计算实现水平垂直居中

布局：

    
calc

样式：

.calc{
  position: relative;
  border: 1px solid #ccc;
  width: 400px;
  height: 160px;
}
.calc .child{
  position: absolute;
  width: 200px;
  height: 50px;
  left:-webkit-calc((400px - 200px)/2);
  top:-webkit-calc((160px - 50px)/2);
  left:-moz-calc((400px - 200px)/2);
  top:-moz-calc((160px - 50px)/2);
  left:calc((400px - 200px)/2);
  top:calc((160px - 50px)/2);
}　

效果：