CSS居中徹底指南——構建CSS居中決策樹

CSS居中徹底指南——構建CSS居中決策樹

• 本文總結CSS居中,包括水平居中和垂直居中.本文至關於CSS決策樹,下次再遇到CSS居中問題時有章可循.
• 參考Centering in CSS: A Complete Guide和【基礎】這15種CSS居中的方式，你都用過哪幾種
• 本文的引用歸原做者全部.
• 代碼在線演示工具JSbin使用指南

1.Horizontally 水平居中

1.1 inline或inline-*元素水平居中

給須要居中的元素一個block父元素,須要居中子元素爲 文本 或者 inline, inline-block, inline-table, inline-flex

核心代碼

.center-children {
  text-align: center;
}

JSbin演示地址
效果:

1.2block元素水平居中

父元素爲block,子元素也爲bolck,且子元素設置了寬度(沒寬度子元素就繼承父元素寬度,居中沒有意義).
不管正在居中塊級元素的寬度或父級的寬度如何，都會起做用。

方法:子元素margin: 0 auto;左右外邊距設置爲自動填充

核心代碼

.center-me {
  margin: 0 auto;
}

效果:

block元素水平居中JSbin演示地址

1.3多個block元素水平居中

1.3.1 多個block元素一行排列水平居中

• 方法一:利用inline-block,原理是將子元素轉化爲inline-block.再用text-align: center;
• 方法二:利用display: flex.注意:子元素高度會保持一致.看下方例子.

核心代碼:

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

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

效果:

多個block元素一行排列水平居中JSbin演示地址

1.3.2 多個block元素每行一個水平居中

由於每一個block元素獨佔一行,因此方法仍然是margin: 0 auto;

演示:

多個block元素每行一個水平居中JSbin演示

2.Vertically垂直居中

垂直居中比較麻煩

2.1 inline 或 inline-* 元素單行垂直居中

須要垂直居中的元素爲單行的inline 或 inline-* 元素,例如一個text或者a連接(包括a連接變化而成的按鈕)

2.1.1 方法一:上下使用相同的padding(推薦)

上下和左右使用相同的padding能夠不用設置寬高,既能夠在修改文本內容是自適應,又能夠減小出現BUG的概率.
核心代碼:

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

演示:

方法一:上下使用相同的paddingJSbin演示地址

2.1.2 方法二:設置line-height與高度相同

核心代碼

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
/*nowrap文本內的換行無效內容只能在一行顯示*/
}

設置line-height與高度相同JSbin演示地址

2.2 多行文本垂直居中

多行文本使用增長上下padding垂直居中的方法仍然有效且良好,不需設置寬高,推薦使用.
若是這樣作不起做用，那麼文本所在的元素多是table或者table-cell元素，不管是真正的table仍是後期本身添加的CSS.
下面說說這兩種狀況使用其餘方法的垂直居中.

2.2.1:方法一:display: table;和vertical-align: middle;

核心代碼:

.center-table {
  display: table;
  
}
.center-table p {
  display: table-cell;
  vertical-align: middle;
}

table+vertical-align: middle多行文本垂直居中JSbin演示

2.2.2 使用flex佈局多行文本居中

一個flex-child能夠簡單地在flex-parent的中心.
核心代碼

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

使用flex多行文本居中JSbin演示地址

2.3 block元素垂直居中

2.3.1已知block元素高度

原理是絕對定位,top: 50%;而後 margin-top設置爲負邊距且值爲他自己高度的一半.
核心代碼:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

注意:使用 position: absolute;絕對定位會使元素脫離文檔流

已知block元素高垂直居中演示

2.3.2 block元素高度未知垂直居中

藉助CSS3中的transform屬性向Y軸反向偏移50%的方法實現垂直居中。可是部分瀏覽器存在兼容性的問題。
核心代碼:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

transform用法

block元素高度未知垂直居中JSbin演示

2.3.3 使用flex佈局block元素高度未知垂直居中

核心代碼:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

用flex佈局block元素高度未知垂直居中JSbin演示

3.Both Horizontally and Vertically水平垂直居中

3.1有固定寬高的元素

核心代碼:
依舊是絕對定位+寬高一半的負邊距

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

有固定寬高的元素JSbin演示

3.2 寬高不固定

利用2D變換，在水平和垂直兩個方向都向反向平移寬高的一半，從而使元素水平垂直居中。

核心代碼

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

寬高不固定水平垂直居中JSbin演示

3.3 使用flex佈局垂直水平居中

核心代碼:

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

使用flex佈局垂直水平居中JSbin演示

3.4 使用grid佈局垂直水平居中

核心代碼:

body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}

使用flex佈局垂直水平居中JSbin演示