主流的CSS水平和垂直居中技術大全

原文地址： https://www.xksblog.top/CSS-mainstream-centering-techniques.html

幾個月也零零散散學了很多CSS居中技術，每到用的時候，發現老是稀裏糊塗的，有時不知道該選用哪一種技術，有時候又經常把方法搞混，索性好好整理一下，之後查閱回顧也更方便。這裏只簡單總結了大部分主流的居中方法，若是有發現更加牛皮好用的，會不斷的更新進來。

水平居中

行內元素的水平居中

1. text-align:center（在父元素中設置）

• 只對內聯元素或行內塊元素有效
• 須要放置於父元素中

塊級元素的水平居中

1. margin: 0 auto;

• 只對塊級元素有效
• auto指的是自適應寬度。實質就是均分了元素左右的剩餘空間，因此元素會居中。
• auto只有在塊級元素設置了寬度width纔有效(塊級元素不設寬度默認就佔整行了，因此是廢話)
• auto沒法實現塊級元素的垂直居中，緣由與CSS默認的高度計算規則有關，這裏暫不深究。但margin:auto能夠實現絕對定位元素的水平垂直居中，見下文。
• 參考：爲何margin爲auto不能垂直居中？、爲何「margin:auto」可讓塊級元素水平居中？、張鑫旭——margin:auto實現絕對定位元素的居中及原理

垂直居中

行內元素的垂直居中

1. line-height: 父元素的高度;（在父元素中設置）

• 只對內聯元素或行內塊元素有效
• 須要知道父元素的高度
• 須要放置於父元素中
• 適用於垂直方向上只有一個須要居中的元素的狀況（想同時垂直居中多個元素時，能夠用padding）

1. vertical-align: middle;（用於垂直對齊inline元素）

• 只對內聯元素或行內塊元素有效
• 主要用在文本和與文本相鄰元素的垂直方向上的對齊問題（主要是對齊的做用，而不是居中的做用），

例如將一個icon與文字對齊。

• 使用vertical-align須要瞭解文字的baseline和line-box等知識，可參考：[[翻譯]關於Vertical-Align你須要知道的事情](https://segmentfault.com/a/11...、我對CSS vertical-align的一些理解與認識（一）

水平垂直居中

浮動元素

1. 使用position:relative;

具體方法與絕對定位的第1個和第2個方法相似，只不過把absolute改成relative，並根據原float的方向稍做修改便可。

• 相對定位relative能夠和float疊加，在float後的位置上再相對定位。
• 缺點就是float元素居中後仍會佔據原來的位置。
• 第二種方式中，若是設定了浮動元素的高度，將會影響transform的具體值。

絕對定位元素

1. 使用50%推動法則

   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -該元素自身寬度的一半px;      /*水平居中*/
   margin-top: -該元素自身高度的一半px;      /*垂直居中*/

• 只對絕對定位的元素有效
• 須要知道絕對定位元素的寬高
• 兼容性很好，是一種主流用法

1. 第一種方法的改進版，使用transform代替margin

   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);  /*水平垂直居中*/

• 不須要知道絕對定位元素的寬高。（若是設置了高度，則有可能影響到transform的具體值）
• 兼容性通常，IE10+以及其餘現代瀏覽器支持

1. 使用margin:auto;

   position: absolute;
   left: 0;
   right: 0;           /*水平居中*/
   top: 0;
   bottom: 0;          /*垂直居中*/
   margin: auto;

• 只對絕對定位的元素有效
• 沒必要知道寬高，但須要是圖片這種自身包含尺寸的元素
• left與right必須配對出現，top與bottom必須配對出現
• 目前支持IE9+，及其餘瀏覽器。
• 參考：張鑫旭——margin:auto實現絕對定位元素的居中及原理

flex居中方式

display: flex;
justify-content: center;  /*水平居中*/
align-items: center;      /*垂直居中*/

• 塊級元素設置display: flex;,內聯元素設置display: inline-flex;。

須要注意的幾個問題

1. 元素浮動後仍能夠設置margin屬性，但auto不會起做用。
2. 圖片居中的問題

• 注意：若是圖片的寬度大於父元素的寬度, 不能使用margin: 0 auto;或者text-align: center;讓圖片居中
• 若是圖片的寬度大於父元素的寬度, 能夠絕對定位中的居中方式讓圖片居中。可是定位流的弊端也比較明顯。它必須知道圖片寬度。
• 若是圖片的寬度大於父元素的寬度, 也可使用margin: 0 -100%;

（注意: 父元素必須設置text-align: center;）