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

要點總結

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

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

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

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

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

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

查看示例：CodePen鏈接

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

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

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

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

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

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

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

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

查看示例：CodePen鏈接

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

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

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

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

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

它採用長度、百分比或關鍵字值。

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

關鍵字值可以是以下之一：

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

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

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

這裡有一個圖像和文本網格，它們都具有不同的高度，這意味著文本並非都整齊地對齊。

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

我們可以將網格容器設置為display: inline-block，並在圖像上使用vertical-align: bottom，以使所有內容都整齊地排列。

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

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

關於如何在CSS中垂直居中文本和圖標的常見問題解答

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

垂直對齊是什麼？

CSS中的垂直對齊是一個屬性，它控制元素沿垂直軸的位置。它是一個強大的工具，可以幫助您精確靈活地設計佈局。它可以用於垂直居中元素，將它們與容器的頂部或底部對齊，或將它們均勻地分佈在垂直空間中。 CSS中的vertical-align屬性通常與內聯(lián)或內聯(lián)塊元素一起使用，但也可以與表格單元格一起使用。

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

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

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

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

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

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

如何垂直對齊圖像？

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

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

可以使用align-items屬性。

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

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

如何垂直對齊多個元素？

可以使用Flex或Grid方法。

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

可以使用top和transform屬性。

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

可以使用vertical-align: middle;。

以上是如何在CSS中垂直中心文本和圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！