一起搞懂 CSS 水平居中與垂直居中的16個方法

Agoreal發表於2019-03-18
CSS

文章結構

一、水平居中

1.1 行內元素

.parent {
    text-align: center;
}
複製程式碼

1.2 塊級元素

1.2.1 塊級元素一般居中方法

.son {
    margin: 0 auto;
}
複製程式碼

1.2.2 子元素含 float

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

.son {
    float: left;
}
複製程式碼

1.2.3 Flex 彈性盒子

1） flex 2012版

.parent {
    display: flex;
    justify-content: center;
}
複製程式碼

2）flex 2009版

.parent {
    display: box;
    box-orient: horizontal;
    box-pack: center;
}
複製程式碼

1.2.4 絕對定位

1）transform

.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
複製程式碼

2）left: 50%

.son {
    position: absolute;
    width: 寬度;
    left: 50%;
    margin-left: -0.5*寬度
}
複製程式碼

3）left/right: 0

.son {
    position: absolute;
    width: 寬度;
    left: 0;
    right: 0;
    margin: 0 auto;
}
複製程式碼

小結

以上是 CSS 水平居中的 8 種方法。

二、垂直居中

2.1 行內元素

.parent {
    height: 高度;
}

.son {
    line-height: 高度;
}
複製程式碼

注：① 子元素 line-height 值為父元素 height 值。② 單行文字。

2.2 塊級元素

2.2.1 行內塊級元素

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

適應 IE7。

2.2.2 table

.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
}
複製程式碼

優點

  • 元素高度可以動態改變, 不需再CSS中定義, 如果父元素沒有足夠空間時, 該元素內容也不會被截斷。

缺點

  • IE6~7, 甚至IE8 beta中無效。

2.2.3 Flex 彈性盒子

1）flex 2012版

.parent {
    display: flex;
    align-items: center;
}
複製程式碼

優點

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

缺點

  • IE8/IE9不支援。
  • 需要瀏覽器廠商字首。
  • 渲染上可能會有一些問題。

2）flex 2009版

.parent {
    display: box;
    box-orien: vertical;
    box-pack: center;
}
複製程式碼

優點

  • 實現簡單, 擴充套件性強。

缺點

  • 相容性差, 不支援IE。

2.2.4 絕對定位

1）transform

.son {
    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
}
複製程式碼

優點

  • 程式碼少。

缺點

  • IE8不支援, 屬性需要追加瀏覽器廠商字首, 可能干擾其他 transform 效果, 某些情形下會出現文字或元素邊界渲染模糊的現象。

2）top: 50%

.son {
    position: absolute;
    top: 50%;
    height: 高度;
    margin-top: -0.5高度;
}
複製程式碼

優點

  • 適用於所有瀏覽器。

缺點

  • 父元素空間不夠時, 子元素可能不可見(當瀏覽器視窗縮小時,滾動條不出現時).如果子元素設定了overflow:auto, 則高度不夠時, 會出現滾動條。

3）top/bottom: 0;

.son {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
複製程式碼

優點

  • 簡單。

缺點

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

小結

以上是 CSS 垂直居中的 8 種方法及其優缺點。

三、小結

小結
以上總結了水平居中、垂直居中各8個共16種方法。

其中，

  • flex
  • 絕對定位

同時適用於水平居中和垂直居中。

希望幫助到了你。

歡迎討論。

٩(๑❛ᴗ❛๑)۶

感謝@ape-casear，@鬥鷹 的指正！

也歡迎大家一起將 CSS 的居中總結得更好！

參考文獻

[1] louis. 16種方法實現水平居中垂直居中[OL]，2017-04-20.

[2] 慢思考快行動. css設定垂直居中[OL], 2017-09-03.

相關文章