使得div水平垂直居中的六种方法

1.绝对定位（已知宽高）

将div块整体向右和向下偏移50%，再用margin将div的中心点挪回原宽高的一半值

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

2.绝对定位（未知宽高，方法一）

不确定当前div的宽度和高度的情况下，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

div{
	position: relative;
}
div.child{
	position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

缺点：transform是CSS3的内容，兼容性不太好

3.绝对定位（未知宽高，方法二）

div{
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

4.flex布局（方法一）

div{
    display:flex;
    align-items:center;
    justify-content:center;
}

5.flex布局（方法二）

div
{
    display:flex;
}
div.child{
	margin：auto；
}

缺点：flex布局低版本（ie6,7,8）不支持

6.table-cell

display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置，表现几乎类似一个td元素。

.div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
div.child{
	display：inline-block
}

div中子元素居中的另一个前提是设置子元素的display：inline-block