垂直居中的實現方法有5種，分別適用于不同場景。1. 單行文字使用line-height等于容器高度；2. 多行文字通過display: table和display: table-cell配合vertical-align: middle實現；3. 塊級元素寬高固定時采用絕對定位+負margin的方式；4. 使用flexbox布局通過display: flex、justify-content和align-items實現簡潔高效的居中；5. grid布局通過display: grid和place-items屬性同時設置水平與垂直居中。每種方法各有適用條件，選擇方案需結合具體場景與兼容性要求。
css垂直居中，這事兒說簡單也簡單，說復雜也挺復雜。關鍵看你面對的是什么情況，是單行文字、多行文字，還是一個塊級元素。不同的情況，方法還真不太一樣。
垂直居中實現方法
實現CSS垂直居中，其實就是一場和css屬性的博弈。掌握了幾個關鍵屬性，就能玩轉各種垂直居中場景。下面就來聊聊幾種常用的方法，以及它們各自的適用情況。
立即學習“前端免費學習筆記（深入）”；
單行文字垂直居中：line-height的妙用
單行文字的垂直居中，可以說是最簡單的了。直接設置line-height等于容器的高度，搞定！這招的原理很簡單，line-height定義了行高的基線間的距離，當它等于容器高度時，文字自然就垂直居中了。
.container { height: 100px; line-height: 100px; }
這種方法簡單粗暴，但只適用于單行文字。如果文字超過一行，那效果就慘不忍睹了。
多行文字垂直居中：模擬表格大法
多行文字的垂直居中就稍微麻煩一點了。一種比較經典的方法是利用display: table和display: table-cell來模擬表格的特性。
.container { display: table; height: 100px; } .content { display: table-cell; vertical-align: middle; }
這里，.container被設置為display: table，.content被設置為display: table-cell，然后通過vertical-align: middle來實現垂直居中。這種方法兼容性不錯，但需要額外的html結構。
塊級元素垂直居中：絕對定位+負margin的組合拳
對于塊級元素，可以使用絕對定位和負margin的組合拳來實現垂直居中。這種方法需要知道元素的確切高度。
.container { position: relative; height: 200px; /* 容器高度 */ } .element { position: absolute; top: 50%; left: 50%; width: 100px; /* 元素寬度 */ height: 50px; /* 元素高度 */ margin-top: -25px; /* 元素高度的一半 */ margin-left: -50px; /* 元素寬度的一半 */ }
首先，將容器設置為position: relative，然后將需要居中的元素設置為position: absolute，并將其top和left都設置為50%。這樣，元素的中心點就位于容器的中心點。然后，通過負margin將元素向上和向左移動自身寬度和高度的一半，使其完全居中。
這種方法需要知道元素的寬高，如果元素寬高是動態的，那就有點麻煩了。
終極方案：Flexbox布局
Flexbox布局是現代css布局的一大利器，用來實現垂直居中簡直是小菜一碟。
.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 200px; /* 容器高度 */ }
只需要將容器設置為display: flex，然后使用justify-content: center來實現水平居中，align-items: center來實現垂直居中。這種方法簡潔高效，而且非常靈活，可以輕松應對各種復雜的布局需求。
但需要注意的是，Flexbox布局在一些老舊的瀏覽器上可能存在兼容性問題。
grid布局：更強大的布局選擇
除了Flexbox，Grid布局也是一種非常強大的布局方式，可以用來實現各種復雜的布局。垂直居中對于Grid來說，同樣不在話下。
.container { display: grid; place-items: center; /* 同時設置水平和垂直居中 */ height: 200px; /* 容器高度 */ }
只需要將容器設置為display: grid，然后使用place-items: center就可以同時實現水平和垂直居中。place-items是align-items和justify-items的縮寫，可以同時設置兩個方向的對齊方式。
Grid布局比Flexbox更加強大，但學習成本也更高。
為什么vertical-align: middle對塊級元素無效？
很多人可能會有疑問，為什么vertical-align: middle對塊級元素無效呢？這是因為vertical-align屬性只對行內元素、行內塊元素以及表格單元格有效。它定義的是元素相對于其父元素的基線的垂直對齊方式。對于塊級元素，vertical-align屬性會被忽略。
如何選擇合適的垂直居中方法？
選擇哪種垂直居中方法，取決于具體的場景和需求。
- 如果只是單行文字，line-height是最簡單直接的選擇。
- 如果是多行文字，可以考慮使用模擬表格的方法。
- 如果是塊級元素，并且寬高固定，可以使用絕對定位+負margin的組合拳。
- 如果需要兼容性較好的方案，可以考慮使用模擬表格的方法。
- 如果追求簡潔高效，并且可以接受一定的兼容性風險，Flexbox或Grid布局是更好的選擇。
總而言之，沒有一種方法是萬能的，需要根據實際情況選擇最合適的方案。
