後面的所有例子，都分為 3 層巢狀：父元素，子元素，內容。其中父子元素都是塊級元素 div。
父元素設定屬性display: flex; justify-content: center; align-items: center;。
父元素設定屬性display: flex;，子元素設定屬性margin: auto;。
父元素設定顯示樣式為display: table，子元素設定顯示樣式為display: table-cell。由於**中只有乙個單元格，這個單元格會自動撐開佔滿整個**，且寬高就是**的寬高。單元格中的內容就可以通過設定vertical-align: middle; text-align: center;自動水平垂直居中了。
優點：內容不需提前定義寬高，可以自動適應，自動居中。當內容太多時會自動把**撐大，內容不會截斷。
父元素設定顯示樣式為display:table-cell，然後利用 vertical 和 text-align 讓所有的行內塊級元素水平垂直居中。子元素設定顯示樣式為display: inline-block。
絕對定位是相對於最近的非 static 的祖先元素進行定位的，所以我們要在其相對定位的元素上定義 display 屬性。
父元素設定 position 為 absolute。
子元素設定 top 為 50%， left 為 50%，margin-top 和 margin-left 為寬高一半的負值。即先把子元素左上角放在父元素中間，然後再向左上方移動子元素寬高的一半，使父子元素中心重合。
缺點：子元素的寬度和高度需要提前限定好。沒有足夠空間時，子元素的內容會溢位（可以設定overflow:auto;變成滾動條。）。
絕對定位是相對於最近的非 static 的祖先元素進行定位的，所以我們要在其相對定位的元素上定義 display 屬性。
不知道子元素的寬高，或者希望子元素可以隨著內容多少而自動調整尺寸時，用此方法。
子元素設定屬性top:0; bottom:0;。如果子元素沒有 height 屬性時，預設高度佔滿父元素。但設定了 height 後，自動垂直居中。margin:auto;自動實現水平居中。相容性有問題，別用。
把 line-height 設定為那個物件的 height 值使文字垂直居中，把 text-align 設定為 center，使文字水平居中。
一般用於使按鈕文字或單行文字等小元素。
grid 布局較新，相容性有問題。
CSS 垂直居中和水平居中
position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...
CSS垂直居中和水平居中
總括 css居中一直是乙個比較敏感的話題，為了以後開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。人生用物，各有天限 夏澇太多，必有秋旱。水平居中設定 行內元素 設定 text align center ...
CSS 水平居中和垂直居中
1 水平居中 行內元素 text align center 2 水平居中 定寬塊狀元素 margin auto，滿足定寬和塊狀兩個條件的元素是可以通過設定 左右margin 值為 auto 來實現居中的。3 水平居中 不定寬塊狀元素 不定寬度的塊狀元素有三種方法居中 這三種方法目前使用的都很多 1 ...