本文將介紹多種CSS水平和垂直居中方法，這些方法曾經(jīng)很棘手，但現(xiàn)在很容易實現(xiàn)。我們將涵蓋使用Flexbox和定位加轉(zhuǎn)換的水平和垂直居中。另一篇文章中，我們還將介紹如何使用CSS Grid進行水平和垂直居中。

要點總結(jié)

• 使用Flexbox垂直居中文本和圖標：將容器轉(zhuǎn)換為Flex容器，并使用justify-content和align-items居中子元素。
• 組合position和transform可以實現(xiàn)垂直居中，尤其適用于高度可變的元素。這通過創(chuàng)建定位上下文并調(diào)整元素相對于其容器的位置來完成。
• line-height屬性可用于在固定高度容器內(nèi)垂直居中單行文本或圖標，而vertical-align可用于居中內(nèi)聯(lián)元素。

如何使用Flexbox進行水平和垂直居中

Flexbox可以水平和垂直對齊元素，從而在CSS中居中文本、圖標或任何其他元素。

要使用Flexbox居中元素，可以使用以下代碼片段：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

此代碼片段將.container轉(zhuǎn)換為Flex容器，自動將其子元素轉(zhuǎn)換為Flex項目。然后，可以使用justify-content水平居中這些Flex項目，使用align-items垂直居中。

查看示例：CodePen鏈接

繼續(xù)閱讀以了解盒子模型的垂直定位和定位技術(shù)。

如何使用position和transform實現(xiàn)靈活的垂直居中

當無法使用Flexbox或需要在容器內(nèi)居中一個項目時，可以使用position將元素放置在其容器的中心。

相反，我們可以組合position和轉(zhuǎn)換來垂直居中高度可變的元素。例如，要在視口整個高度內(nèi)垂直居中元素，可以使用以下代碼片段：

.container {
  position: relative;
  min-height: 100vh;
}
.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

我們首先通過在容器元素上設(shè)置position: relative來創(chuàng)建定位上下文。這將允許我們在其邊界內(nèi)定位.vertical-center元素。

接下來，我們將要居中元素的左上角放置在其容器的中心，方法是將其頂部邊緣放置在其父元素頂部的50%處，將其左邊緣放置在其父元素左邊的50%處。

最后，通過將其向上平移其高度的50%和向左平移其寬度的50%，將元素調(diào)整回中心。現(xiàn)在，我們的元素在容器內(nèi)垂直和水平居中。由于放置是使用相對于元素大小的百分比值完成的，因此如果容器或子元素的寬度或高度發(fā)生變化，元素將保持居中。

查看示例：CodePen鏈接

如何使用line-height在固定高度下進行垂直居中

要在其容器內(nèi)垂直居中單行文本或圖標，可以使用line-height屬性。此屬性控制文本運行中一行的高度，并在內(nèi)聯(lián)元素的線框上方和下方添加等量的空間。如果容器的高度已知，則設(shè)置相同值的line-height將垂直居中子元素。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

如何使用vertical-align居中內(nèi)聯(lián)元素

vertical-align屬性僅影響其顯示設(shè)置為inline、inline-block或table-cell的元素。

它采用長度、百分比或關(guān)鍵字值。

長度和百分比將元素的基線與在其父元素基線上方給定距離處對齊。

關(guān)鍵字值可以是以下之一：

• baseline
• sub
• super
• text-top
• text-bottom
• middle
• top
• bottom

大多數(shù)這些都非常直觀，但sub將基線與父元素的下標基線對齊，而super將元素的基線與父元素的上標基線對齊。

讓我們在一個實際示例中看看vertical-align。

這里有一個圖像和文本網(wǎng)格，它們都具有不同的高度，這意味著文本并非都整齊地對齊。

（此處應(yīng)插入原文中的HTML代碼，并進行相應(yīng)的修改，使其更簡潔易懂，并避免使用失效鏈接）

我們可以將網(wǎng)格容器設(shè)置為display: inline-block，并在圖像上使用vertical-align: bottom，以使所有內(nèi)容都整齊地排列。

如果這里沒有文本，并且我們希望所有圖像都垂直居中，我們可以使用vertical-align: middle并獲得相當不錯的效果。

有關(guān)更多居中方法，請務(wù)必查看如何使用CSS Grid進行水平和垂直居中。

關(guān)于如何在CSS中垂直居中文本和圖標的常見問題解答

（此處對原文FAQ部分進行了精簡，保留核心信息，并對部分答案進行了更清晰的表達。）

垂直對齊是什么？

CSS中的垂直對齊是一個屬性，它控制元素沿垂直軸的位置。它是一個強大的工具，可以幫助您精確靈活地設(shè)計布局。它可以用于垂直居中元素，將它們與容器的頂部或底部對齊，或?qū)⑺鼈兙鶆虻胤植荚诖怪笨臻g中。CSS中的vertical-align屬性通常與內(nèi)聯(lián)或內(nèi)聯(lián)塊元素一起使用，但也可以與表格單元格一起使用。

如何使用CSS垂直居中文本？

可以使用display: flex和align-items: center垂直居中文本。

可以使用垂直對齊處理塊級元素嗎？

可以使用position: relative; top: 50%; transform: translateY(-50%);垂直對齊塊級元素。

為什么我的垂直對齊不起作用？

原因可能包括父容器未指定高度，或試圖使用vertical-align對齊塊級元素。

如何垂直對齊圖像？

可以使用與文本相同的方法。

可以使用垂直對齊處理CSS Grid嗎？

可以使用align-items屬性。

如何垂直對齊按鈕中的文本？

可以使用line-height屬性，其值應(yīng)與按鈕高度相同。

如何垂直對齊多個元素？

可以使用Flex或Grid方法。

可以使用垂直對齊處理絕對定位嗎？

可以使用top和transform屬性。

如何垂直對齊表格單元格中的文本？

可以使用vertical-align: middle;。

以上是如何在CSS中垂直中心文本和圖標的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！