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

要點(diǎn)總結(jié)

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

如何使用Flexbox進(jìn)行水平和垂直居中

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

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

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

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

查看示例：CodePen鏈接

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

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

當(dāng)無(wú)法使用Flexbox或需要在容器內(nèi)居中一個(gè)項(xiàng)目時(shí)，可以使用position將元素放置在其容器的中心。

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

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

我們首先通過(guò)在容器元素上設(shè)置position: relative來(lái)創(chuàng)建定位上下文。這將允許我們?cè)谄溥吔鐑?nèi)定位.vertical-center元素。

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

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

查看示例：CodePen鏈接

如何使用line-height在固定高度下進(jìn)行垂直居中

要在其容器內(nèi)垂直居中單行文本或圖標(biāo)，可以使用line-height屬性。此屬性控製文本運(yùn)行中一行的高度，並在內(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的元素。

它採(cǎi)用長(zhǎng)度、百分比或關(guān)鍵字值。

長(zhǎng)度和百分比將元素的基線與在其父元素基線上方給定距離處對(duì)齊。

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

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

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

讓我們?cè)谝粋€(gè)實(shí)際示例中看看vertical-align。

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

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

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

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

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

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

（此處對(duì)原文FAQ部分進(jìn)行了精簡(jiǎn)，保留核心信息，並對(duì)部分答案進(jìn)行了更清晰的表達(dá)。）

垂直對(duì)齊是什麼？

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

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

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

可以使用垂直對(duì)齊處理塊級(jí)元素嗎？

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

為什麼我的垂直對(duì)齊不起作用？

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

如何垂直對(duì)齊圖像？

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

可以使用垂直對(duì)齊處理CSS Grid嗎？

可以使用align-items屬性。

如何垂直對(duì)齊按鈕中的文本？

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

如何垂直對(duì)齊多個(gè)元素？

可以使用Flex或Grid方法。

可以使用垂直對(duì)齊處理絕對(duì)定位嗎？

可以使用top和transform屬性。

如何垂直對(duì)齊表格單元格中的文本？

可以使用vertical-align: middle;。

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