將Flexbox與顯示：Flex，Align-Inems：中心和正當(dāng)內(nèi)容：現(xiàn)代，響應(yīng)式中心中心； 2。應(yīng)用帶有顯示的CSS網(wǎng)格：網(wǎng)格和地點(diǎn)項(xiàng)目：以網(wǎng)格佈局為中心的雙軸中心； 3。將線路高等於單線文本等於容器高度； 4。聯(lián)合位置：絕對(duì)，頂部：50％，左：50％和變換：動(dòng)態(tài)或未知高度的轉(zhuǎn)換（-50％，-50％）； 5。使用顯示：帶有垂直空調(diào)的表格：舊式瀏覽器支持的中間；始終確保容器具有定義的高度或佈局上下文，並且由於其簡(jiǎn)單，靈活性和響應(yīng)能力而更喜歡大多數(shù)現(xiàn)代用例的Flexbox。

div中的垂直居中文本是CSS的常見挑戰(zhàn)，並且有幾種可靠的方法，具體取決於您的佈局需求。這是最實(shí)用和最廣泛支持的方法：

1。使用Flexbox（推薦）

Flexbox是垂直（水平和水平）中心文本的最簡(jiǎn)單，最現(xiàn)代的方法。

 。容器 {
  顯示：Flex;
  Jusify-content：中心； / *水平中心 */
  準(zhǔn)項(xiàng)目：中心； / *垂直中心 */
  身高：200px; / *必須具有定義的高度 */
  邊界：1PX實(shí)心#CCC;
}

 <div class =“容器”>
  <p>中心文本</p>
</div>

• 適用於單行或文本塊的完美工作。
• 默認(rèn)情況下， justify-content下以合理的方式將其水平居中。
• 高度響應(yīng)且易於維護(hù)。

2。使用CSS網(wǎng)格

CSS網(wǎng)格是另一種與FlexBox相似的現(xiàn)代方法。

 。容器 {
  顯示：網(wǎng)格；
  地點(diǎn)項(xiàng)目：中心； / *垂直和水平的中心 */
  身高：200px;
  邊界：1PX實(shí)心#CCC;
}

 <div class =“容器”>
  <p>中心文本</p>
</div>

• place-items: center是對(duì)align-items和justify-items速記。
• 如果您已經(jīng)使用網(wǎng)格進(jìn)行佈局，那就太好了。

3。使用行高（用於單線文本）

如果您有單行的文本和固定高度容器，則可以將line-height與容器的高度匹配。

 。容器 {
  身高：100px;
  線高：100px; / *與高度相同 */
  文字平衡：中心；
  邊界：1PX實(shí)心#CCC;
}

 <div class =“容器”>
  <span>中心文本</span>
</div>

• 僅適用於單線文本。
• 如果文本包裝，文本會(huì)溢出或?qū)擂巍?/li>

4。使用變換和絕對(duì)定位

當(dāng)容器的高度未知或動(dòng)態(tài)時(shí)，有用。

 。容器 {
  位置：相對(duì)；
  身高：200px;
  邊界：1PX實(shí)心#CCC;
}

.Container P {
  位置：絕對(duì)；
  頂部：50％；
  左：50％；
  變換：轉(zhuǎn)換（-50％，-50％）;
  保證金：0;
}

 <div class =“容器”>
  <p>中心文本</p>
</div>

• 垂直和水平的中心。
• 使用動(dòng)態(tài)內(nèi)容和未知高度。
• 需要position: relative 。

5。使用表格顯示（舊方法）

現(xiàn)在不太常見，但是如果您支持沒有FlexBox的較舊瀏覽器，則有用。

 。容器 {
  顯示：表格;
  垂直分組：中間；
  文字平衡：中心；
  身高：200px;
  寬度：200px;
  邊界：1PX實(shí)心#CCC;
}

 <div class =“容器”>
  <p>中心文本</p>
</div>

• vertical-align: middle在這里工作，因?yàn)?code>table-cell模擬了表佈局。
• 不像Flexbox或Grid那樣靈活。

快速提示：

• 始終確保容器具有定義的高度（或在提供一個(gè)的佈局內(nèi)）。
• 對(duì)於大多數(shù)現(xiàn)代項(xiàng)目而言， Flexbox是最佳選擇 - 簡(jiǎn)單，可靠且響應(yīng)迅速。
• 如果文本可能包裝，請(qǐng)避免使用line-height 。

基本上，請(qǐng)選擇Flexbox，除非您有特定原因不這樣做。它乾淨(jìng)，可讀，並且?guī)缀跛杏美伎梢蕴幚怼?/p>

以上是如何與CSS垂直對(duì)齊文本的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！