布局：水平居中、垂直居中、水平垂直居中

水平居中

inline-block+text-align

兼容到IE6

把子元素设为inline-block 元素，然后对父元素设置text-align:center 让子元素居中

    
DEMO



.child{
    display:inline-block;
    text-align:center;	//避免child里面的文字也水平居中
}
.parent{
    text-align:center;
}

table+margin

兼容到IE8

    
DEMO



.child{
    display:table;	//div被换成了table
    margin:0 auto;
}

绝对定位：absolute+transform（推荐）

transform为css3属性，兼容到IE10，IE9添加-ms-transform 属性

    
DEMO



.parent {
    position:relative;
}
.child {
    position:absolute;
    left:50%;
    transform:translateX(-50%);	//再向左偏移自身宽度的一半
}

flex1：flex+margin

flex为css3属性，兼容到IE9

    
DEMO



.parent {
    display:flex;
}
.child {
    margin:0 auto;
}

flex2：flex+justify-content（推荐）

flex为css3属性，兼容到IE9

    
DEMO



.parent {
    display:flex;
    justify-content:center;
}

垂直居中

table-cell+vertical-align

兼容到IE8

    
DEMO



.parent {
    display:table-cell;	//1.将父框转化为一个表格单元格
    vertical-align:middle;	//2.使表格单元格内容垂直居中
}

绝对定位：absolute+transform（推荐）

类似于水平居中的那个方法

transform为css3属性，兼容到IE10，IE9添加-ms-transform 属性

    
DEMO



.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

flex+align-items（推荐）

flex为css3属性，兼容到IE9

    
DEMO



.parent {
    position:flex;
    align-items:center;
}

水平垂直居中

display:flex + margin: ‘auto’（非常推荐）

  



.parent {
  background-color: lightblue;
  height: 500px;
  display: flex;   /* 关键代码 */
}

.child {
    width: 100px; height: 100px;
    background-color: lightseagreen;
    margin: auto;   /* 关键代码 */
}

inline-block+text-align+table-cell+vertical-align

    
DEMO



.child {
    display:inline-block;	//1.水平居中
}
.parent {
    text-align:center;	//2.水平居中
    display:table-cell;	//3.垂直居中
    vertical-align:middle;	//4.垂直居中
}

绝对定位：absolute+transform（推荐）

    
DEMO



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

flex+justify-content+align-items（推荐）

    
DEMO



.parent{
    display:flex;
    justify-content:center;	//水平居中
    align-items:center;	//垂直居中
}