CSS几种居中方式

• 使用<table><tr><td>标签

HTML代码

<table class="parent">
<tr><td class="child">
table居中的方法
</td></tr>
</table>

CSS代码

.parent{
  border: 1px solid red;
  height: 600px;
}
.child{
  border: 1px solid green;
}

父元素的高度确定,子元素无高度且内容依据父元素垂直居中。

• 使用100% 高度的span. befor和span.afrer 加上display:inline-block

HTML代码

<div class="parent">
    <span class=before></span>
         <div class="child"></div>
    <span class=after></span>
</div>

CSS代码

.parent{
  height: 600px;
  text-align: center;                       /*水平居中*/
}

.child{
  display: inline-block;
  width: 300px;                            /*宽度可设置*/
  vertical-align: middle;                /*垂直居中*/
}

.parent .before{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent .after{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

• 使用div替代table

HTML代码

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

CSS代码

div.parent{
  display: table;
  height: 600px;                                        /*父元素高度确定*/
}
div.td{
  display: table-cell;
  vertical-align: middle;                            /*实现垂直居中*/
}
div.child{
}

• margin-top:50%

HTML代码

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

CSS代码

.parent{
  height: 600px;                    /*父元素高度确定，子元素依据此高度居中*/
  position: relative;
}
.child {                            /*垂直和水平居中*/
    width: 600px; height: 400px;
    position: absolute;
    left: 50%; top: 50%;
    margin-top: -200px;             /* 高度的一半 */
    margin-left: -300px;            /* 宽度的一半 */
}

这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。

• 使用transform:translate(-50%, -50%）

HTML代码

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

CSS代码

.parent{
  display: table;
  height: 600px;                          /*父元素高度确定*/
}

.child{
    width: 600px; height: 400px;
    position: absolute; 
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 水平 垂直  50%为自身尺寸的一半*/
}

使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的。 问题很明显，兼容性不好。IE9(-ms-), IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的（手机web开发可忽略）。

• 使用margin:auto

HTML代码

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

CSS代码

.parent{
  height: 600px;
  position: relative;
}
.child{
  position: absolute;
  width: 300px;
  height: 200px;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;                          /* 有了这个就自动居中了 */
}       

上面代码的width: 300px height: 200px仅是示意，修改为其他尺寸，或者不设置尺寸（需要是图片这种自身包含尺寸的元素），都是居中显示的。
可以用一个小demo来加深印象

HTML代码：

<div id="dialog" class="dialog">
    <input type="button" id="button" class="button" value="点击弹框走起~~" />
</div>

CSS代码：

.dialog {
 width: 600px; height: 400px;
 margin: auto; 
 border: 1px solid #ddd;
 border-radius: 15px; background-color: #fff;
 box-shadow: 0 3px 18px rgba(0,0,0,.5); }

.dialog_absolute {
 position: absolute; 
 left: 0; top: 0; right: 0; bottom: 0; z-index: 1; }

.button { 
 display: block; 
 margin: 170px auto;
 width: 160px; height: 36px; 
 font-size: 14px; }

JS代码：

var eleDialog = document.getElementById("dialog"),
    eleButton = document.getElementById("button");

eleButton.onclick = function() {
    if (eleDialog.className === "dialog") {
        eleDialog.className = "dialog dialog_absolute";
        this.value = "点击弹框降落~~";    
    } else {
        eleDialog.className = "dialog";
        this.value = "点击弹框走起~~";    
    }
};