css垂直置中

標籤：ott   code   position   mic   nsf   style   play   inline   splay   

垂直置中常用方法總結:

一、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

 

css垂直置中