1.水平居中
1.1已知宽度块元素宽度 :
.child{width:1000px;
margin:0 auto;
}
1.2文本内容居中:
.parent{text-align:center;
}
1.3通过表格:
.child{display:table;
margin:0 auto;
}
1.4已知宽度,通过设置position:absolute,margin-left为宽度的负一半
.parent{position:relative;
}
.child{position:absolute;
left:50%;
width:150px;
margin-left:-75px;
}
1.5未知宽度,通过设置position:absolute
.parent{position:relative;
}
.child{position:absolute;
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
1.6使用flex布局实现（兼容性不好，感觉有点变成浮动的效果，不在文档流）
第一种：.parent{display:flex;
justify-content:center;
}
第二种：.parent{display:flex;
}.child{margin:0 auto;
}
2.垂直居中
2.1文本垂直居中 .child{height:20px; line-height:20px} 2.2vertial-align:middle;
第一种方法：.parent{display:table-cell;
vertical-align:middle;
height:20px;
}
第二种方法：.parent{display:inline-block;
vertical-align:middle;
line-height:20px;
}
2.3未知高度，设置position:absolute
.parent{position:relative;
}
.child{position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
}
2.4已知高度，设置position:absolute,margin-top为高度的负一半
.parent{position:relative;
}
.child{position:absolute;
top:50%;
height:150px;
margin-top:-75px;
}
2.5使用flex布局实现
.parent{display:flex;
align-items:center;
}
相关链接：史上最全HTML与CSS布局技巧
