标签：
通过将父元素的display设置为flex,并将子元素的margin设置为auto即可实现，不过这种方法有些兼容问题
如下：
.outer { width:400px; height:400px; border:1px solid #000; display:flex; } .inner { width:200px; height:200px; border:1px solid #000; margin:auto; }
这种方式不需要首先知道子元素的宽高，会根据内容自适应，还是很方便的。
设置父元素的position为relative,子元素的position为absolute,并设置其left,right,top,bottom都为0，margin为auto
.outer { position:relative; width:400px; height:400px; border:1px solid #000; } .inner { position:absolute; width:200px; height:200px; left:0; right:0; top:0; bottom:0; margin:auto; border:1px solid #000; }
但是这种方法必须首先知道子元素的高度，否则高度会充满父容器，因为top和bottom都为0
个人觉得这种方法比较麻烦，但是之前好像还是一种比较常用的方式，最开始学前端时网上搜到的都是这种，也是利用了margin值可以设为负值这一性质吧
.outer { position:relative; width:400px; height:400px; border:1px solid #000; } .inner { position:absolute; width:200px; height:200px; top:50%; margin-top:-100px; left:50%; margin-left:-100px;
/*margin-left:auto;
margin-right:auto;*/
border:1px solid #000; }
当然这种方法根据子元素的宽高设置margin值，所以首先也必须要知道子元素的宽高，不是很方便。
通过设置元素的display:table-cell是其展示出表格中的单元格的显示特性，同时利用vertical-align属性设置内部元素的对齐方式。
.outer { display:table; text-align:center; width:400px; height:400px; border:1px solid #000; } .inner { display:table-cell; vertical-align:middle; border:1px solid #000; } <div class="outer"> <div class="inner"> 我是inner <div>我是inner中的一个div</div> </div> </div>
效果如下：
通过这种方式，inner是充满outer的，其内部的元素垂直居中，而无论内联元素还是块级元素都有效，很适合内部内容高度未知的情况。
以上是我目前所了解的几种方法，以后再慢慢总结完善~~~~
标签：
原文地址：http://www.cnblogs.com/hualuyao/p/4590714.html
