方法一：絕對(duì)定位方法：不確定當(dāng)前div的寬度和高度，采用 transform: translate(-50%,-50%); 當(dāng)前div的父級(jí)添加相對(duì)定位（position: relative;）

div{
  background:red;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

**

方法二：絕對(duì)定位方法：確定了當(dāng)前div的寬度，margin值為當(dāng)前div寬度一半的負(fù)值。

**

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

**

方法三：絕對(duì)定位方法：絕對(duì)定位下top left right bottom 都設(shè)置0

**

<div class="child">我是子級(jí)</div>1

div{
   width:600px;
   height:600px;
   background:red;
   position:absolute;
   left:0;
   top:0;
   bottom:0;
   right:0;
   margin:auto;
}

**

方法四： flex布局方法：當(dāng)前div的父級(jí)添加flex css樣式

**

<div class="box">
     <div class="child">child</div>
</div>

.box{
   height:800px;
   -webkit-display:flex;
   display:flex;
   -webkit-align-items:center;
   align-items:center;
   -webkit-justify-content:center;
   justify-content:center;
   border:1px solid #ccc;}div.child{
   width:600px;
   height:600px;
   background:red;
}

**

方法五：table-cell實(shí)現(xiàn)水平垂直居中: table-cell middle center組合使用（讓div里面的文本內(nèi)容）

**

<div class="table-cell">
     <p>我愛你</p>
</div>

.table-cell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border: 1px solid #666;
}

**

方法六：絕對(duì)定位：calc() 函數(shù)動(dòng)態(tài)計(jì)算實(shí)現(xiàn)水平垂直居中

**

<div class="calc">
      <div class="child">calc</div>
</div>

.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);
 }