在父元素上設定display:table-cell;vertical-align:middle(父元素不能設定浮動)
使用flex：父元素設定成display: flex; align-items:center;
display:flex和margin:auto
使用絕對定位和負邊距 子元素設定為絕對定位，top,left都為父元素的50%，用margin-left,margin-top退回超出的自身寬高的一半（適用於已經確定內部子元素寬高）
子元素使用絕對定位，方位都為0：（這種也是需要設定內部子元素寬高）
css3translate:(原理和方法4差不多)
使用偽元素進行佔位
父元素設定偽元素，將其高設為100%,這樣同在一行子元素位置隨該偽元素變化而變化，當高度100%時，子元素就居中
.box:after子元素必須設定為vertical-align:middle;display:inline-block;
CSS實現垂直居中
1 最簡單的單行文字line height垂直居中 2 垂直居中，使用line height和vertical align middle 3 使用table布局，display table和display table cell xx 4 絕對居中，使用margin auto和top bottom l...
CSS實現垂直居中
hack技術就可以啊！所以在這裡我還要囉嗦兩句，css中的確是有vertical align屬性，但是它只對 x html元素中擁有valign特性的元素才生效，例如 元素中的 等，而像 這樣的元素是沒有valign特性的，因此使用vertical align對它們不起作用。一 單行垂直居中 如果乙...
css實現垂直居中
一 單行內容的居中 設定height與line height相等，overflow hidden即可。demo height 20px line height 20px overflow hidden 注 若不使用overflow hidden，在瀏覽器頁面縮放時會出現問題。二 div垂直居中 注意...