如果给定了父元素和子元素的宽高，那么让子元素在父元素内实现垂直水平居中有很多种方法，但是碰到元素的宽高不确定的情况下，或是浮动之后的元素要居中就比较麻烦了，以下提供一些css3的属性来解决这个问题。
<body> <div class="wrapper"> <ul class="links"> <li> <a href="#">Link1</a> </li> <li> <a href="#">Link2</a> </li> <li> <a href="#">Link3</a> </li> <li> <a href="#">Link4</a> </li> </ul> </div> </body>
* { margin: 0px; padding: 0px; list-style: none; } .wrapper { /*不论父容器设置的宽高是多少,都不会影响子元素的居中*/ /* 75%; height: 10em; margin: 4em auto 0;*/ background: lightgoldenrodyellow; display: -webkit-box; display: -ms-flex; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-justify-content: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-align-items: center; -webkit-align-items: center; align-items: center; } .links li{ float: left; margin-right: 2em; background: cadetblue; } /*.links li:last-child{ margin: 0; }*/ .links li a{ font-size: 2em; color: yellow; }
由于现在设备和的屏幕的大小差异很大，所以我们在给页面布局时会考虑项目是否有自适应的效果，很多时候是不能写死容器的宽高的，这种弹性布局很好地处理了这个问题，还有一个好处在于可以让浮动之后的元素（例如li）也获取这种居中效果。不管有没有给子元素设置浮动属性，还是向左浮动或向右浮动都不会影响子元素的定位。但因为浏览器对这些css3的特性并不一定完全支持，所以还需要写一些css hack来处理兼容问题。
更多参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html