css3实现无宽高子元素水平垂直居中

css3中flex伸缩布局给移动端带来了很大的便利（因为移动端浏览器基本上都兼容最新的html5/css3），通常我们会遇到想把一个盒子内的元素居中，不管是垂直还是水平（当然以往垂直居中很折腾人）。

如何实现呢？那就使用前面说的flex伸缩布局了。看代码更直观。

<style type="text/css">
.box{
    width:700px;
    height:700px;
    border:1px solid #e0e0e0;
    display:flex;    /*改变盒模型*/
    align-items:center;  /*这里就是让子元素垂直居中了，在侧轴方向*/
    justify-contents:center; /*这里让子元素水平居中，在主轴方向*/
}
.box > p{background-color:#F30;color:#FFF;}
</style>
<!--华丽的分割线-->
<div class="box">
    <p>这里就是内容了啊，这个P标签没有宽高，横竖都是个居中。如果要自动换行，且多行垂直居中的话就要靠宽度影响了。</p>
</div>