总结了几种css居中实现的方式，注：*为常用方式，“wrap”为容器，“div”为要居中的元素。
*1.绝对定位，宽高都已知的情况下如下代码可实现，或者可以使用negative margins；
.div { width: 200px;height: 200px;margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
2.不知道元素的宽高，仅仅实现某个div是其父的1/2，水平垂直居中，随着父元素的大小等比例放大或者缩小。
.div{position: absolute;left: 30%;right:30%;top: 25%;bottom:25%;}
*3.translate，宽度已知，高度未知的情况下
.wrap{width:200px;//也可以不写，默认占总宽度的50%position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
4.table-cell，div本身高度未知，仅仅实现垂直居中的情况下，ps，此种情况div宽度是100%
.wrap{//外层容器display: table; }.div{//内层容器display: table-cell; vertical-align: middle; }
*5.flex布局，宽度都不固定的情况下，只要在父容器中设置display:flex即可。
.wrap{display: flex; display: -webkit-flex; justify-content: center;align-items: center;}
6.hack方法，善于运用:after。
.wrap { text-align: center; overflow: auto; } .wrap:after, .div { display: inline-block; vertical-align: middle; } .div:after { content: ''; height: 100%; margin-left: -0.25em; /* 需要根据不同的字号做调整 */ } .wrap { max-width: 99%; /* 防止文档过长时会到容器的顶部 */ max-width: calc(100% - 0.25em) /* Only for IE9+ */ }
