css垂直居中

垂直居中常用方法总结:

一、div 在 div中居中

　　1. 绝对居中 　　

　　　　position: absolute; left: 0; top: 0; right: 0; bottom: 0;

  　　　　margin: auto;

　　2. 绝对定位

　　　　position: absolute;

　　　　top: 50%;

　　　　left: 50%;

　　　　transform: translate(-50%,-50%);

　　或

　　　　margin:  -width;

　　3. 内边距

二、span 在 div中居中

　　1. 单行文本

　　　　1) line-height == height

　　　　2) button 特性 

　　2. 多行文本

　　　　1) 外层嵌套div, 使div垂直居中

　　　　2） 伪元素before/after

　　　　　　content: "";

　　　　　　height: 100%;

　　　　　　display:  inline-block;

　　　　　　vertical-align: middle;

三、img在div中居中

　　1）定高

　　　　<div>

　　　　　　<img>

　　　　<div>

　　　　方法:

　　　　　　div { line-height: 200px; }

　　　　　　img { vertical-align: middle; }　

　　2）不定高

　　　　1. 伪元素before/after

　　　　　　content: "";

　　　　　　height: 100%;

　　　　　　display:  inline-block;

　　　　　　vertical-align: middle;

　　　　　　或

　　　　　　空标签 　

　　　　　　height: 100%;

 

　　　　　　display:  inline-block;

 

　　　　　　vertical-align: middle;

 

　　　　2. table

　　　　　　display: table-cell;         /*  IE8 以上 */

　　　　　　vertical-align: middle;

　　　　3. background-position

　　　　4. 绝对定位

 

　　　　　　position: absolute;

 

　　　　　　top: 50%;

 

　　　　　　left: 50%;

 

　　　　　　transform: translate(-50%,-50%);     /* css3  */

　　　　5. 绝对定位

　　　　　　<div>

　　　　　　　<span>

　　　　　　　　　　<img />

　　　　　　　</span>

　　　　　　</div>

　　　　　　方法：

　　　　　　　　div { position: relative; }

　　　　　　　　span { display: inline-block; position: absolute; left: 50%; top: 50%; }

　　　　　　　　img { position: relative; left: -50%; top: -50% ; }