如果给定了父元素和子元素的宽高，那么让子元素在父元素内实现垂直水平居中有很多种方法，但是碰到元素的宽高不确定的情况下，或是浮动之后的元素要居中就比较麻烦了，以下提供一些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 {/*不论父容器设置的宽高是多少,都不会影响子元素的居中*//*width: 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来处理兼容问题。
更多参考：/blog//07/flex-grammar.html
