熟悉水平居中和垂直居中的方法, 不爲別的, 就爲用的時候可以信手拈來. 下面直接步入正題.
原文：16種方法實現水平居中垂直居中css

水平居中

1) 如果行內元素, 給其父元素設置 text-align:center,便可實現行內元素水平居中.git

2) 如果塊級元素, 該元素設置 margin:0 auto便可.github

3) 若子元素包含 float:left 屬性, 爲了讓子元素水平居中, 則可以讓父元素寬度設置爲fit-content,而且配合margin, 做以下設置:web

.parent{ width: -moz-fit-content; width: -webkit-fit-content; width:fit-content; margin:0 auto; }

fit-content是CSS3中給width屬性新加的一個屬性值,它配合margin能夠輕鬆實現水平居中, 目前只支持Chrome 和 Firefox瀏覽器.瀏覽器

4) 使用flex 2012年版本佈局, 能夠輕鬆的實現水平居中, 子元素設置以下:佈局

.son{ display: flex; justify-content: center; }

5) 使用flex 2009年版本, 父元素display: box;box-pack: center;以下設置:post

.parent { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; display: -ms-box; -ms-box-orient: horizontal; -ms-box-pack: center; display: box; box-orient: horizontal; box-pack: center; }

6) 使用CSS3中新增的transform屬性, 子元素設置以下:flex

.son{ position:absolute; left:50%; transform:translate(-50%,0); }

7) 使用絕對定位方式, 以及負值的margin-left, 子元素設置以下:ui

.son{ position:absolute; width:固定; left:50%; margin-left:-0.5寬度; }

8) 使用絕對定位方式, 以及left:0;right:0;margin:0 auto; 子元素設置以下:spa

.son{ position:absolute; width:固定; left:0; right:0; margin:0 auto; }

垂直居中

單行文本

1) 若元素是單行文本, 則可設置 line-height 等於父元素高度

行內塊級元素

2) 若元素是行內塊級元素, 基本思想是使用display: inline-block, vertical-align: middle和一個僞元素讓內容塊處於容器中央.

.parent::after, .son{ display:inline-block; vertical-align:middle; } .parent::after{ content:''; height:100%; }

這是一種很流行的方法, 也適應IE7.

元素高度不定

3) 可用 vertical-align 屬性, 而vertical-align只有在父層爲 td 或者 th 時, 纔會生效, 對於其餘塊級元素, 例如 div、p 等, 默認狀況是不支持的. 爲了使用vertical-align, 咱們須要設置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

優勢

元素高度能夠動態改變, 不需再CSS中定義, 若是父元素沒有足夠空間時, 該元素內容也不會被截斷.

缺點

IE6~7, 甚至IE8 beta中無效.

4) 可用 Flex 2012版, 這是CSS佈局將來的趨勢. Flexbox是CSS3新增屬性, 設計初衷是爲了解決像垂直居中這樣的常見佈局問題. 相關的文章如《彈性盒模型Flex指南》

父元素作以下設置便可保證子元素垂直居中:

.parent { display: flex; align-items: center; }

優勢

  • 內容塊的寬高任意, 優雅的溢出.
  • 可用於更復雜高級的佈局技術中.

缺點

  • IE8/IE9不支持
  • 須要瀏覽器廠商前綴
  • 渲染上可能會有一些問題

5) 使用flex 2009版.

.parent { display: box; box-orient: vertical; box-pack: center; }

優勢

實現簡單, 擴展性強

缺點

兼容性差, 不支持IE

6) 可用 transform , 設置父元素相對定位(position:relative), 子元素以下css樣式:

.son{ position:absolute; top:50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

優勢

代碼量少

缺點

IE8不支持, 屬性須要追加瀏覽器廠商前綴, 可能干擾其餘 transform 效果, 某些情形下會出現文本或元素邊界渲染模糊的現象.

元素高度固定

7) 設置父元素相對定位(position:relative), 子元素以下css樣式:

.son{ position:absolute; top:50%; height:固定; margin-top:-0.5高度; }

優勢

適用於全部瀏覽器.

缺點

父元素空間不夠時, 子元素可能不可見(當瀏覽器窗口縮小時,滾動條不出現時).若是子元素設置了overflow:auto, 則高度不夠時, 會出現滾動條.

8) 設置父元素相對定位(position:relative), 子元素以下css樣式:

.son{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; }

優勢

簡單

缺點

沒有足夠空間時, 子元素會被截斷, 但不會有滾動條.

總結

水平居中較爲簡單, 共提供了8種方法, 通常狀況下 text-align:center,marin:0 auto; 足矣

  • ① text-align:center;
  • ② margin:0 auto;
  • ③ width:fit-content;
  • ④ flex
  • ⑤ 盒模型
  • ⑥ transform
  • ⑦ ⑧ 兩種不一樣的絕對定位方法

垂直居中, 共提供了8種方法.

  • ① 單行文本, line-height
  • ② 行內塊級元素, 使用 display: inline-block, vertical-align: middle; 加上僞元素輔助實現
  • ③ vertical-align
  • ④ flex
  • ⑤ 盒模型
  • ⑥ transform
  • ⑦ ⑧ 兩種不一樣的絕對定位方法

咱們發現, flex, 盒模型, transform, 絕對定位, 這幾種方法同時適用於水平居中和垂直居中.

但願對你們有所幫助.