css中盒子垂直居中几种方法

1.脱离文档流居中

　　css部分

　　　　div{ width: 300px; height: 300px; position: relative; border: 1px solid #465468; }

　　　　img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }

　　html部分

　　　　<div> <img src="prince.png"> </div>

2.负margin法

　　css部分

　　　　.container{ width: 500px; height: 400px; border: 2px solid #379; position: relative; }

　　　　.inner{ width: 480px; height: 380px; background-color: #746; position: absolute; top: 50%; left: 50%; margin-top: -190px; /*height的一半*/ margin-left: -240px; /*width的一半*/ }

　　html部分

　　　　<div class="container"> <div class="inner"></div> </div>

　　注释：这里，我们首先用top:50%和left:50%让inner的坐标原点（左上角）移动到container的中心，然后再利用负margin让它往左偏移自身宽的一半，再往上偏移自身高的一半，这样inner的中心点就跟container的中心点对齐了。

3.弹性盒子居中法

　　css部分

　　　　.container{ width: 300px; height: 200px; border: 3px solid #546461; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

　　　　.inner{ border: 3px solid #458761; padding: 20px; }

　　html部分

　　　　<div class="container"> <div class="inner"> 我在容器中水平垂直居中 </div> </div>