关于div居中的问题

一、水平居中（宽度未知）

     <div class="parent">
         <div class="child">
              ...
         </div>   
     </div>

1. 将需要居中的div 设置为 行内块元素,父级div 设置 text-align:center

  .parent{
    text-align:center;
  }
  .child {
    display: inline-block;
  }

2. 先将子元素设置为块级表格来显示（类似），再将其设置水平居中,
   display:table在表现上类似block元素，但是宽度由内容撑开。

 .child {
    display: table;
    margin: 0 auto;
  }

3. 先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，
   最后通过向左移动子元素的一半宽度以 达到水平居中。
   （垂直居中同理 top: 50%; transform:translateY(-50%);）

  .parent {
    position:relative;
  }
  .child {
    position:absolute;
    left:50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }

二、垂直居中

1. 利用表布局 父元素display:table; 子元素 display:table-cell; vertical-align:middle;

  .parent {
    display:table
  }
  .child {
     display:table-cell; 
     vertical-align:middle;
  }

2. 使用absolute+负margin(已知高度宽度)
   通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。

<div class="parent">
    <div class="child">固定高度的块级元素垂直居中。</div>
</div>
.parent {
   position: relative;
}
.child {
   position: absolute;  
   top: 50%;
   height: 100px;
   margin-top: -50px;
}

3. 使用absolute+transform
   当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
   position: relative;
}
.child {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}