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. 伪元素before/after

　　　　content: "";

　　　　height: 100%;

　　　　display:  inline-block;

　　　　vertical-align: middle;

　　2. table

　　　　display: table-cell;

　　　　vertical-align: middle;

　　3. background-position