我們都知道使用margin:auto可以讓元素水平居中的。但你有沒有想過使用margin:auto可以讓元素水平居中的原因，要回答這個問題，我們首先需要看一下margin：auto的工作原理。auto如果它適用於垂直居中，那么又是一種什么情況，下面我們來看具體內容。
首先auto是做什么的？
定義auto元素，因元素類型和上下文而異。在邊距中，auto可以表示兩種情況：占用可用空間或0 px。這兩個將為元素定義不同的布局。
“自動”占用可用空間
這是我們利用auto最常見的用法。通過分配auto元素的左右邊距，它們可以平等地占據元素容器中的可用水平空間 - 因此元素將居中。
| 1 2 3 |
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
效果如下：
但是，這只適用於水平邊距，它不適用於浮動和內聯元素，並且它本身也不能用於絕對和固定定位元素。
推薦手冊： CSS在線手冊
由於auto左右邊距均勻地占據“可用”空間，當你auto只給出其中一個時，你認為會發生什么？
左邊距或右邊距auto將占據所有“可用”空間，使元素看起來像是向右或向左偏移。
| 1 2 3 |
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
效果如下：
“auto”為0px
如前所述，auto在浮動，內聯和絕對元素中不起作用。所有這些元素已經決定了它們的布局，所以沒有auto用於邊距並期望它像這樣集中。
這將破壞使用類似float的最初目的。因此設置這些元素的auto值為0px。
auto如果它沒有寬度，也不會對典型的塊元素起作用。到目前為止我向你展示的所有例子都有寬度。
值的寬度auto將具有0px邊距。塊元素的寬度通常覆蓋其整個容器，它是auto或100%，因此margin:auto將被設置為0px。
auto設置垂直會是怎樣的呢？
auto在頂部和底部邊距中總是計算為0px（絕對元素除外）。W3C規范說它是這樣的：
“如果”margin-top“或”margin-bottom“為”auto“，則其使用值為0”
到目前為止，為什么這沒有說。這可能是因為典型的垂直頁面流，頁面大小在高度方面增加。因此，相對於頁面本身而言，將元素垂直居中於其容器中不會使其顯示為居中，這與水平完成（在大多數情況下）不同。
也許是因為同樣的原因，他們決定為絕對元素添加一個例外，它可以在整個頁面的高度垂直居中。
這也可能是由於邊緣坍塌效應（相鄰元素“邊緣”的崩潰），這是垂直邊距的另一個例外。
然而，后者似乎是一個不太可能的情況 - 因為不會折疊其邊距的元素 - 如Floats和overflow其他元素visible，仍然為其分配0px垂直邊距auto。
以絕對定位元素為中心
由於絕對定位元素恰好存在異常，我們將使用auto值垂直和水平居中。但在此之前，我們需要找出margin:auto實際工作的時間，就像我們希望它在絕對定位的元素中一樣。
這是另一個W3C規范的用武之地：
“如果”left“，”width“和”right“中的所有三個都是”auto“：首先將”margin-left“和”margin-right“的任何”auto“值設置為0 ... ”
“如果三者中沒有一個是”自動“：如果”margin-left“和”margin-right“都是”auto“，則在額外約束條件下解決方程式，即兩個邊距得到相等的值”
這幾乎說，對水平auto的利潤率，抓住間隔相等，則對值left，width並且right不應該auto，他們的默認值。因此，我們所要做的就是在絕對定位的元素中賦予它們一些價值。left並且right應該具有相同的值以實現完美的居中。
該規范還提到了垂直邊距類似的東西。
“如果”top“，”height“和”bottom“中的所有三個都是auto，則將”top“設置為靜態位置...”
“如果三者中沒有一個是”自動“：如果”margin-top“和”margin-bottom“都是”auto“，則在額外約束下解決方程式，即兩個邊距得到相等的值......”
因此，對於一個絕對元件被垂直居中，其top，height和bottom值不應該auto。
現在結合所有這些，這是我們將得到的：
| 1 2 3 |
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
效果如下：
最后
如果您想要將頁面上的元素向右或向左偏移而沒有包含它的其他元素（就像浮點數一樣），請記住有auto用於邊距的選項。
將元素轉換為絕對定位只是為了使它可以垂直居中可能不是一個好主意。還有其他選項，如flexbox和CSS變換，更適合那些。
轉載自:https://www.php.cn/css-tutorial-412560.html