水平居中
对于已知宽度的块级元素实现水平居中只需要设置
margin-left:auto; margin-right:auto;
对于多个块级元素实现水平居中只需要设置
//1 父类{ text-align:center; } 块级元素{ display:inline-block; } //2 父类{ display:flex;(flex布局兼容性问题) justify-content:center; }
对于未知宽度的块级元素实现水平居中
position:absolute;
left:50%;
transform:translateX(-50%);//若宽度w已知,可采用margin-left:-w/2px方式，两者实现结果一样
垂直居中
多行的行内元素垂直居中
display:table-cell;
vertical-align:middle;
已知高度的块级元素垂直居中
position:absolute;
top:50%;
margin-top:-h/2px;(已知高度一半)
未知高度的块级元素垂直居中
position:absolute;
top:50%;
transform:translateY(-50%);
display:flex;
justify-content:center;
align-items:center;
网上看到相关的教程，自己整合记录下来，方便自己后面查看
原文：http://www.cnblogs.com/liuyfl/p/4973790.html