如何在 div 塊內居中文本（水平和垂直）？

Question

我有一個div設置為display:block （ 90px height和width ），我里面有一些文本。

我需要將文本垂直和水平對齊在中心。

我試過text-align:center ，但它沒有做垂直居中部分，所以我嘗試了vertical-align:middle ，但它沒有用。

有任何想法嗎？

Answer 1

如果它是一行文本和/或圖像，那么很容易做到。 只需使用：

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

而已。 如果它可以是多行，那么它會更復雜一些。 但是http://pmob.co.uk/上有解決方案。 尋找“垂直對齊”。

因為它們往往是黑客或添加復雜的 div... 我通常使用一個帶有單個單元格的表格來完成它... 使其盡可能簡單。

---

2020 年更新：

除非您需要讓它在 Internet Explorer 10 等早期瀏覽器上工作，否則您可以使用 flexbox。 目前所有主流瀏覽器都廣泛支持它。 基本上，需要將容器指定為 flex 容器，並沿其主軸和交叉軸居中：

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

為孩子指定一個固定的寬度，稱為“彈性項目”：

#content {
  flex: 0 0 120px;
}

示例：http: //jsfiddle.net/2woqsef1/1/

要收縮包裝內容，它更簡單：只需從 flex 項目中刪除flex: ...行，它就會自動收縮包裝。

示例：http: //jsfiddle.net/2woqsef1/2/

上面的示例已經在包括 MS Edge 和 Internet Explorer 11 在內的主要瀏覽器上進行了測試。

如果您需要對其進行自定義，請提供一個技術說明：在 flex 項目內部，由於此 flex 項目本身不是 flex 容器，因此舊的非 flexbox 方式的 CSS 可以按預期工作。 然而，如果你在當前的 flex 容器中添加一個額外的 flex 項，這兩個 flex 項將被水平放置。 要使它們垂直放置，請添加flex-direction: column; 到彈性容器。 這就是它在 flex 容器及其直接子元素之間的工作方式。

還有另一種進行居中的方法：不為 flex 容器的主軸和交叉軸上的分布指定center ，而是在 flex 項目上指定margin: auto以占用所有四個方向上的所有額外空間，並且均勻分布的邊距將使彈性項目在所有方向上居中。 這有效，除非有多個彈性項目。 此外，此技術適用於 MS Edge，但不適用於 Internet Explorer 11。

---

2016 / 2017 年更新：

它可以更常見地使用transform完成，即使在 Internet Explorer 10 和 Internet Explorer 11 等較舊的瀏覽器中也能很好地工作。它可以支持多行文本：

position: relative;
top: 50%;
transform: translateY(-50%);

示例： https ://jsfiddle.net/wb8u02kL/1/

要收縮包裝寬度：

上面的解決方案對內容區域使用了固定寬度。 要使用收縮包裝的寬度，請使用

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

示例： https ://jsfiddle.net/wb8u02kL/2/

如果需要對 Internet Explorer 10 的支持，那么 flexbox 將不起作用，而上面的方法和line-height方法將起作用。 否則，flexbox 會完成這項工作。

Answer 2

截至 2014 年的常用技術：

---

• 方法 1 - transform translateX / translateY ：

  此處示例/全屏示例

  在支持的瀏覽器（大多數）中，您可以使用top: 50% / left: 50%結合translateX(-50%) translateY(-50%)來動態垂直/水平居中元素。

   .container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

---

• 方法 2 - Flexbox 方法：

  此處示例/全屏示例

  在支持的瀏覽器中，將目標元素的display設置為flex並使用align-items: center垂直居中和justify-content: center水平居中。 只是不要忘記添加供應商前綴以獲得額外的瀏覽器支持（參見示例）。

   html, body, .container { height: 100%; } .container { display: flex; align-items: center; justify-content: center; }

---

• 方法 3 - table-cell / vertical-align: middle ：

  此處示例/全屏示例

  在某些情況下，您需要確保將html / body元素的高度設置為100% 。

  對於垂直對齊，將父元素的width / height設置為100%並添加display: table 。 然后對於子元素，將display更改為table-cell並添加vertical-align: middle 。

  對於水平居中，您可以添加text-align: center以使文本和任何其他inline子元素居中。 或者，您可以使用margin: 0 auto假設元素是block級的。

   html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }

---

• 方法 4 - 從頂部絕對定位50% ，有位移：

  此處示例/全屏示例

  這種方法假定文本具有已知的高度 - 在本例中為18px 。 相對於父元素，將元素從頂部絕對定位50% 。 使用元素已知高度的一半的負margin-top值，在本例中-9px 。

   html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; }

---

• 方法 5 - line-height方法（最不靈活 - 不建議）：

  示例在這里

  在某些情況下，父元素將具有固定的高度。 對於垂直居中，您所要做的就是在子元素上設置一個等於父元素的固定高度的line-height值。

  盡管此解決方案在某些情況下會起作用，但值得注意的是，當有多行文本時它不起作用 -像 this 。

   .parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; }

---

方法 4 和 5 不是最可靠的。 選擇前 3 個中的一個。

Answer 3

使用彈性盒/CSS：

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS：

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

取自快速提示：垂直和水平居中元素的最簡單方法

Answer 4

添加行display: table-cell; 到該 div 的 CSS 內容。

只有表格單元格支持vertical-align: middle; ，但是您可以將 [table-cell] 定義賦予 div ...

一個活生生的例子在這里：http: //jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

Answer 5

將此 CSS 類賦予目標 <div>：

 .centered { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; background: red; /* Not necessary just to see the result clearly */ }

 <div class="centered">This text is centered horizontally and vertically</div>

Answer 6

您可以為此嘗試非常簡單的代碼：

  display: flex;
  align-items: center;
  justify-content: center;

 .box{ height: 90px; width: 90px; background: green; display: flex; align-items: center; justify-content: center; }

 <div class="box"> Lorem </div>

Codepen 鏈接： http ://codepen.io/santoshkhalse/pen/xRmZwr

Answer 7

我總是使用以下 CSS 作為容器，使其內容水平和垂直居中。

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

在此處查看實際操作： https ://jsfiddle.net/yp1gusn7/

Answer 8

您可以在父div中使用flex屬性並將margin:auto屬性添加到子項：

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

你可以在這里看到更多的flex選項： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 9

2020年的方式

.parent{ 
  display: grid;
  place-items: center;
}

Answer 10

方法一

 div { height: 90px; line-height: 90px; text-align: center; border: 2px dashed #f69c55; }

 <div> Hello, World!! </div>

方法二

 div { height: 200px; line-height: 200px; text-align: center; border: 2px dashed #f69c55; } span { display: inline-block; vertical-align: middle; line-height: normal; }

 <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span> </div>

方法 3

 div { display: table; height: 100px; width: 100%; text-align: center; border: 2px dashed #f69c55; } span { display: table-cell; vertical-align: middle; }

 <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div>

Answer 11

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

Answer 12

在父div中添加以下代碼

 display: grid;
 place-items: center;

Answer 13

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

Answer 14

 div { height: 90px; line-height: 90px; text-align: center; border: 2px dashed #f69c55; }

 <div> Hello, World!! </div>

Answer 15

網格

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

 .center { display: grid; justify-items: center; align-items: center; } .box { width: 200px; height: 100px; background: red; }

 <div class="box center">My text</div>

Answer 16

調整行高以獲得垂直對齊。

line-height: 90px;

Answer 17

這對我有用（測試OK！）：

HTML：

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS：

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

您可以選擇 50% 以外的其他值。 例如，25% 以父母的 25% 為中心。

Answer 18

您可以嘗試以下方法：

1. 如果您只有一個單詞或一行句子，那么下面的代碼就可以解決問題。

   在 div 標簽內有一個文本並給它一個 id。 為該 ID 定義以下屬性。

    id-name { height: 90px; line-height: 90px; text-align: center; border: 2px dashed red; }

   注意：確保 line-height 屬性與分割的高度相同。

   圖片

   但是，如果內容超過一個單詞或一行，那么這不起作用。 此外，有時您無法以 px 或 % 為單位指定分區的大小（當分區非常小並且您希望內容正好在中間時）。

2. 為了解決這個問題，我們可以嘗試下面的屬性組合。

    id-name { display: flex; justify-content: center; align-items: center; border: 2px dashed red; }

   圖片

   這 3 行代碼將內容准確地設置在一個分區的中間（與顯示的大小無關）。 “align-items：center”有助於垂直居中，而“justify-content：center”將使其水平居中。

   注意： Flex 並非適用於所有瀏覽器。 確保添加適當的供應商前綴以獲得額外的瀏覽器支持。

Answer 19

 .cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center} .cell {display: table-cell} .cell-middle {vertical-align: middle}

 <div class="cell-row"> <div class="cell cell-middle">Center</div> </div>

Answer 20

對我有用的非常簡單的代碼！ 只需一行，您的文本將水平居中。

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

輸出如下所示：

Answer 21

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Answer 22

對我來說，這是最好的解決方案：

HTML：

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS：

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

Answer 23

應用風格：

position: absolute;
top: 50%;
left: 0;
right: 0;

無論其長度如何，您的文本都會居中。

Answer 24

這對我有用：

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

Answer 25

這應該是正確的答案。 最干凈和最簡單的：

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 26

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

Answer 27

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

Answer 28

試試下面的例子。 我為每個類別添加了示例：水平和垂直

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>