譬如，要实现以下效果：

方法一：absolute + 负margin （此方法好理解，兼容性OK，缺点是需要知道子元素的宽高）

<div class="dbig">

<div class="box size">aaaaaa</div>

</div>

/*css代码*/

.dbig{

border: 1px solid red;

width: 300px;

height: 300px;

position: relative;

}

.box {

background: green;

}

.box.size{

width: 100px;

height: 100px;

position: absolute;;

top: 50%;

left: 50%;

margin-left: -50px;

margin-top: -50px;

}

方法二：absolute + margin auto（此方法兼容性也很好，缺点是需要知道子元素的宽高）

<div class="dbig">

<div class="box size">aaaaaa</div>

</div>

/*css代码*/

.dbig{

position: relative;

}

.box {

position: absolute;;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

}

方法三：absolute + calc（此方法兼容性依赖calc的兼容性，缺点是需要知道子元素的宽高）

<div class="dbig">

<div class="box size">aaaaaa</div>

</div>

/*css代码*/

.dbig{

position: relative;

}

.box {

position: absolute;;

top: calc(50% - 50px);

left: calc(50% - 50px);

}

方法四：absolute + transform（这种方法兼容性依赖translate2d的兼容性）

<div class="dbig">

<div class="box size">aaaaaa</div>

</div>

/*css代码*/

.dbig{

position: relative;

}

.box {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

方法五：lineheight（此方法需要在子元素中将文字显示重置为想要的效果）

<div class="dbig">

<div class="box size">aaaaaa</div>

</div>

/*css代码*/

.dbig{

line-height: 300px;

text-align: center;

font-size: 0px;

}

.box {

font-size: 16px;

display: inline-block;

vertical-align: middle;

line-height: initial;

text-align: left; /* 修正文字 */

}

方法六：css-table（css新增的table属性，可以让把普通元素变为table元素的现实效果，通过这个特性也可以实现水平垂直居中，这种方法和table一样的原理，但却没有那么多冗余代码，兼容性也还不错）

<div class="dbig">

<div class="box size">aaaaaa</div>

</div>

/*css代码*/

.dbig{

display: table-cell;

text-align: center;

vertical-align: middle;

}

.box {

display: inline-block;

}

方法七：flex（目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况）

<div class="dbig">

<div class="box size">aaaaaa</div>

</div>

/*css代码*/

.dbig{

display: flex;

justify-content: center;

align-items: center;

}

总结1：

1、PC端有兼容性要求，宽高固定，推荐absolute + 负margin

2、PC端有兼容要求，宽高不固定，推荐css-table

3、PC端无兼容性要求，推荐flex

4、移动端推荐使用flex

总结2：兼容性

方法

居中元素定宽高固定PC兼容性移动端兼容性

1）absolute + 负margin

ie6+, chrome4+, firefox2+安卓2.3+, iOS6+absolute + margin auto是ie6+, chrome4+, firefox2+安卓2.3+, iOS6+

2）absolute + calc

ie9+, chrome19+, firefox4+安卓4.4+, iOS6+

3）absolute + transform

ie9+, chrome4+, firefox3.5+安卓3+, iOS6+

4）lineheight

ie6+, chrome4+, firefox2+安卓2.3+, iOS6+

5）css-table

ie8+, chrome4+, firefox2+安卓2.3+, iOS6+

6）flex

ie10+, chrome4+, firefox2+安卓2.3+, iOS6+