熟悉水平居中和垂直居中的方法, 不為別的, 就為用的時(shí)候能夠信手拈來. 下面直接步入正題.
原文：16種方法實(shí)現(xiàn)水平居中垂直居中

水平居中

1) 若是行內(nèi)元素, 給其父元素設(shè)置 text-align:center,即可實(shí)現(xiàn)行內(nèi)元素水平居中.

2) 若是塊級元素, 該元素設(shè)置 margin:0 auto即可.

3) 若子元素包含 float:left 屬性, 為了讓子元素水平居中, 則可讓父元素寬度設(shè)置為fit-content,并且配合margin, 作如下設(shè)置:

.parent{
      width: -moz-fit-content;
    width: -webkit-fit-content;
    width:fit-content;
    margin:0 auto;
}復(fù)制代碼

fit-content是CSS3中給width屬性新加的一個屬性值,它配合margin可以輕松實(shí)現(xiàn)水平居中, 目前只支持Chrome 和 Firefox瀏覽器.

4) 使用flex 2012年版本布局, 可以輕松的實(shí)現(xiàn)水平居中, 子元素設(shè)置如下:

.son{
    display: flex;
    justify-content: center;
}復(fù)制代碼

5) 使用flex 2009年版本, 父元素display: box;box-pack: center;如下設(shè)置:

.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;
}復(fù)制代碼

6) 使用CSS3中新增的transform屬性, 子元素設(shè)置如下:

.son{
    position:absolute;
      left:50%;
      transform:translate(-50%,0);
}復(fù)制代碼

7) 使用絕對定位方式, 以及負(fù)值的margin-left, 子元素設(shè)置如下:

.son{
    position:absolute;
    width:固定;
    left:50%;
    margin-left:-0.5寬度;
}復(fù)制代碼

8) 使用絕對定位方式, 以及l(fā)eft:0;right:0;margin:0 auto; 子元素設(shè)置如下:

.son{
    position:absolute;
    width:固定;
    left:0;
    right:0;
    margin:0 auto;
}復(fù)制代碼

垂直居中

單行文本

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

行內(nèi)塊級元素

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

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}復(fù)制代碼

這是一種很流行的方法, 也適應(yīng)IE7.

元素高度不定

3) 可用 vertical-align 屬性, 而vertical-align只有在父層為 td 或者 th 時(shí), 才會生效, 對于其他塊級元素, 例如 div、p 等, 默認(rèn)情況是不支持的. 為了使用vertical-align, 我們需要設(shè)置父元素display:table, 子元素 display:table-cell;vertical-align:middle;

優(yōu)點(diǎn)

元素高度可以動態(tài)改變, 不需再CSS中定義, 如果父元素沒有足夠空間時(shí), 該元素內(nèi)容也不會被截?cái)?

缺點(diǎn)

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

4) 可用 Flex 2012版, 這是CSS布局未來的趨勢. Flexbox是CSS3新增屬性, 設(shè)計(jì)初衷是為了解決像垂直居中這樣的常見布局問題. 相關(guān)的文章如《彈性盒模型Flex指南》

父元素做如下設(shè)置即可保證子元素垂直居中:

.parent {
  display: flex;
  align-items: center;
}復(fù)制代碼

優(yōu)點(diǎn)

• 內(nèi)容塊的寬高任意, 優(yōu)雅的溢出.

• 可用于更復(fù)雜高級的布局技術(shù)中.

缺點(diǎn)

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

5) 使用flex 2009版.

.parent {
      display: box;
      box-orient: vertical;
      box-pack: center;
}復(fù)制代碼

優(yōu)點(diǎn)

實(shí)現(xiàn)簡單, 擴(kuò)展性強(qiáng)

缺點(diǎn)

兼容性差, 不支持IE

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

.son{
    position:absolute;
    top:50%;
    -webkit-transform: translate(-50%,-50%);  
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}復(fù)制代碼

優(yōu)點(diǎn)

代碼量少

缺點(diǎn)

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

元素高度固定

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

.son{
    position:absolute;
    top:50%;
    height:固定;
    margin-top:-0.5高度;
}復(fù)制代碼

優(yōu)點(diǎn)

適用于所有瀏覽器.

缺點(diǎn)

父元素空間不夠時(shí), 子元素可能不可見(當(dāng)瀏覽器窗口縮小時(shí),滾動條不出現(xiàn)時(shí)).如果子元素設(shè)置了overflow:auto, 則高度不夠時(shí), 會出現(xiàn)滾動條.

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

.son{
    position:absolute;
    height:固定;
    top:0;
    bottom:0;
    margin:auto 0;
}復(fù)制代碼

優(yōu)點(diǎn)

簡單

缺點(diǎn)

沒有足夠空間時(shí), 子元素會被截?cái)? 但不會有滾動條.

• ① text-align:center;

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

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

• ① 單行文本, line-height
• ② 行內(nèi)塊級元素, 使用 display: inline-block, vertical-align: middle; 加上偽元素輔助實(shí)現(xiàn)
• ③ vertical-align
• ④ flex
• ⑤ 盒模型
• ⑥ transform
• ⑦ ⑧ 兩種不同的絕對定位方法

我們發(fā)現(xiàn), flex, 盒模型, transform, 絕對定位, 這幾種方法同時(shí)適用于水平居中和垂直居中.