如何垂直對齊div中的文本？

Question

我正在嘗試找到將文本與 div 對齊的最有效方法。 我已經嘗試了一些東西，但似乎都沒有。

 .testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; }

 <div class="testimonialText"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

Answer 1

在現代瀏覽器中執行此操作的正確方法是使用 Flexbox。

有關詳細信息，請參閱此答案。

有關在舊瀏覽器中工作的一些舊方法，請參見下文。

---

CSS中的垂直居中
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

文章摘要：

對於 CSS 2 瀏覽器，可以使用display:table / display:table-cell來居中內容。

JSFiddle也提供了一個示例：

 div { border:1px solid green;}

 <div style="display: table; height: 400px; overflow: hidden;"> <div style="display: table-cell; vertical-align: middle;"> <div> everything is vertically centered in modern IE8+ and others. </div> </div> </div>

可以將舊瀏覽器 (Internet Explorer 6/7) 的 hack 合並到樣式中，使用#隱藏新瀏覽器的樣式：

 div { border:1px solid green;}

 <div style="display: table; height: 400px; #position: relative; overflow: hidden;"> <div style= "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div style=" #position: relative; #top: -50%"> everything is vertically centered </div> </div> </div>

Answer 2

您需要添加line-height屬性，並且該屬性必須與div的高度匹配。 在你的情況下：

 .center { height: 309px; line-height: 309px; /* same as height! */ }

 <div class="center"> A single line. </div>

事實上，您可以完全刪除height屬性。

這僅適用於一行文本，所以要小心。

Answer 3

這是一個很棒的資源

來自http://howtocenterincss.com/ ：

在 CSS 中居中是一件令人頭疼的事情。 取決於各種因素，似乎有無數種方法可以做到這一點。 這將合並它們並為您提供每種情況所需的代碼。

使用彈性盒

為了使這篇文章與最新技術保持同步，這里有一種使用 Flexbox 將內容居中的更簡單的方法。 Internet Explorer 9 和更低版本不支持 Flexbox。

這里有一些很棒的資源：

• Flexbox 指南
• 使用 Flexbox 使元素居中
• 用於 Flexbox 的 Internet Explorer 10 語法
• 對彈性盒的支持

帶有瀏覽器前綴的 JSFiddle

 li { display: flex; justify-content: center; align-content: center; flex-direction: column; /* Column | row */ }

 <ul> <li> <p>Some Text</p> </li> <li> <p>A bit more text that goes on two lines</p> </li> <li> <p>Even more text that demonstrates how lines can span multiple lines</p> </li> </ul>

另一種解決方案

這是從zerosixthree 開始的，讓您可以使用六行 CSS 將任何內容居中

Internet Explorer 8 及更低版本不支持此方法。

jsfiddle

 p { text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

 <ul> <li> <p>Some Text</p> </li> <li> <p>A bit more text that goes on two lines</p> </li> <li> <p>Even more text that demonstrates how lines can span multiple lines</p> </li> </ul>

上一個答案

一種簡單且跨瀏覽器的方法，由於標記答案中的鏈接有些過時，因此很有用。

如何在不使用 JavaScript 或 CSS 行高的情況下在無序列表和 div 中垂直和水平居中文本。 無論您有多少文本，您都不必將任何特殊類應用於特定列表或 div（每個代碼都相同）。 這適用於所有主要瀏覽器，包括 Internet Explorer 9、Internet Explorer 8、Internet Explorer 7、Internet Explorer 6、Firefox、Chrome、 Opera和 Safari。 由於現代瀏覽器所沒有的 CSS 限制，有兩個特殊的樣式表（一個用於 Internet Explorer 7，另一個用於 Internet Explorer 6）來幫助他們。

Andy Howard - 如何在無序列表或 div 中垂直和水平居中文本

因為我在上一個項目中不太關心 Internet Explorer 7/6，所以我使用了一個稍微精簡的版本（即刪除了使它在 Internet Explorer 7 和 6 中工作的東西）。 它可能對其他人有用...

JSFiddle

 .outerContainer { display: table; width: 100px; /* Width of parent */ height: 100px; /* Height of parent */ overflow: hidden; } .outerContainer .innerContainer { display: table-cell; vertical-align: middle; width: 100%; margin: 0 auto; text-align: center; } li { background: #ddd; width: 100px; height: 100px; }

 <ul> <li> <div class="outerContainer"> <div class="innerContainer"> <div class="element"> <p> <!-- Content --> Content </p> </div> </div> </div> </li> <li> <div class="outerContainer"> <div class="innerContainer"> <div class="element"> <p> <!-- Content --> Content </p> </div> </div> </div> </li> </ul>

Answer 4

使用display: flex很容易。 使用以下方法， div中的文本將垂直居中：

 div { display: -webkit-flex; display: flex; align-items: center; /* More style: */ height: 300px; background-color: #888; }

 <div> Your text here. </div>

如果你願意，水平：

 div { display: -webkit-flex; display: flex; align-items: center; justify-content: center; /* More style: */ height: 300px; background-color: #888; }

 <div> Your text here. </div>

您必須看到您需要的瀏覽器版本； 在舊版本中，代碼不起作用。

Answer 5

我使用以下方法可以輕松地將隨機元素垂直居中：

HTML：

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS：

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

這會將我的div中的文本居中到 200px 高的外部div的確切垂直中間。 請注意，您可能需要使用瀏覽器前綴（例如-webkit-在我的情況下）才能使其適用於您的瀏覽器。

這不僅適用於文本，也適用於其他元素。

Answer 6

試試這個，添加父 div：

display: flex;
align-items: center;

Answer 7

您可以通過將顯示設置為“表格單元格”並應用vertical-align: middle; ：

    {
        display: table-cell;
        vertical-align: middle;
    }

然而，根據我未經許可從http://www.w3schools.com/cssref/pr_class_display.asp復制的這段摘錄，所有版本的 Internet Explorer 都不支持這一點。

注意：值“inline-table”、“table”、“table-caption”、“table-cell”、“table-column”、“table-column-group”、“table-row”、“table-row” Internet Explorer 7 及更早版本不支持-group”和“inherit”。 Internet Explorer 8 需要一個!DOCTYPE。 Internet Explorer 9 支持這些值。

下表顯示了也來自http://www.w3schools.com/cssref/pr_class_display.asp的允許顯示值。

Answer 8

這些天來（我們不再需要 Internet Explorer 6-7-8）我只會使用 CSS display: table來解決這個問題（或display: flex ）。

桌子：

 .vcenter { display: table; background: #eee; /* optional */ width: 150px; height: 150px; text-align: center; /* optional */ } .vcenter > :first-child { display: table-cell; vertical-align: middle; }

 <div class="vcenter"> <p>This is my Text</p> </div>

柔性：

 .vcenter { display: flex; align-items: center; height: 150px; justify-content: center; /* optional */ background: #eee; /* optional */ width: 150px; }

 <div class="vcenter"> <p>This is my text</p> </div>

---

對於舊版瀏覽器：

這是（實際上是）我最喜歡解決這個問題的解決方案（簡單且很好的瀏覽器支持）：

 div { margin: 5px; text-align: center; display: inline-block; } .vcenter { background: #eee; /* optional */ width: 150px; height: 150px; } .vcenter:before { content: " "; display: inline-block; height: 100%; vertical-align: middle; max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */ } .vcenter > :first-child { display: inline-block; vertical-align: middle; max-width: 99.999%; }

 <div class="vcenter"> <p>This is my text</p> </div> <div class="vcenter"> <h4>This is my Text<br/>Text<br/>Text</h4> </div> <div class="vcenter"> <div> <p>This is my</p> <p>Text</p> </div> </div>

Answer 9

Flexbox非常適合我，將父 div 中的多個元素水平和垂直居中。

下面的代碼將 parent-div 內的所有元素堆疊在一列中，將元素水平和垂直居中。 我使用 child-div 將兩個 Anchor 元素保持在同一行（行）上。 如果沒有 child-div，所有三個元素（Anchor、Anchor 和 Paragraph）都堆疊在 parent-div 的列中。 這里只有 child-div 堆疊在 parent-div 列內。

 .parent-div { height: 150px; display: flex; flex-direction: column; justify-content: center; background: pink; }

 <div class="parent-div"> <div class="child-div"> <a class="footer-link" href="https://www.github.com/">GitHub</a> <a class="footer-link" href="https://www.facebook.com/">Facebook</a> <p class="footer-copywrite">© 2019 Lorem Ipsum.</p> </div> </div>

Answer 10

您可以使用顯示網格和放置項目中心：

 .container { width: 200px; height: 200px; border: solid red; display: grid; place-items: center; }

 <div class="container"> Lorem, ipsum dolor. </div>

Answer 11

這是一個最適合單行文本的解決方案。

如果行數已知，它也可以用於多行文本，並進行一些調整。

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

這是一個 JSFiddle 。

Answer 12

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

Answer 13

您可以使用 Flexbox 在 div 內垂直對齊中心文本。

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

您可以在A Complete Guide to Flexbox中了解更多信息。

Answer 14

檢查這個簡單的解決方案：

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

Answer 15

有一種更簡單的方法可以垂直對齊內容，而無需使用表格/表格單元格：

http://jsfiddle.net/bBW5w/1/

在其中我添加了一個不可見的（寬度= 0）div，它假定容器的整個高度。

它似乎適用於 Internet Explorer 和 Firefox（最新版本）。 我沒有檢查其他瀏覽器

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

當然還有 CSS：

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Answer 16

這是我找到的最干凈的解決方案（Internet Explorer 9+），並通過使用其他答案省略的transform-style來修復“偏移 0.5 像素”問題。

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

來源： 只需 3 行 CSS 即可垂直對齊任何內容

Answer 17

HTML：

<div class="col-md-2 ml-2 align-middle">
    <label for="option2" id="time-label">Time</label>
</div>

CSS：

.align-middle {
    margin-top: auto;
    margin-bottom: auto;
}

Answer 18

一個不知道值的元素的簡單解決方案：

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Answer 19

根據 Adam Tomat 的回答，准備了一個JSFiddle示例來對齊div中的文本：

<div class="cells-block">    
    text<br/>in the block   
</div>

通過在 CSS 中使用display:flex ：

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

另一個例子和博客文章中的一些解釋。

Answer 20

網格項目上的自動邊距。

與 Flexbox 類似，在網格項上應用邊距自動使其在兩個軸上居中：

.container {
  display: grid;
}
.element {
  margin: auto;
}

Answer 21

利用：

 h1 { margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .container { height: 200px; width: 500px; position: relative; border: 1px solid #eee; }

 <div class="container"> <h1>Vertical align text</h1> </div>

有了這個技巧，如果你不想讓它居中，你可以對齊任何東西，添加“left：0”來左對齊。

Answer 22

使用 CSS 網格為我做到了：

 .outer { background-color: grey; width: 10rem; height: 10rem; display: grid; justify-items: center; } .inner { background-color: #FF8585; align-self: center; }

 <div class='outer'> <div class='inner'> Content </div> </div>

Answer 23

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

Answer 24

使用 flex，請注意瀏覽器渲染的差異。

這適用於 Chrome 和 Internet Explorer：

 .outer { display: flex; width: 200px; height: 200px; background-color: #ffc; } .inner { display: flex; width: 50%; height: 50%; margin: auto; text-align: center; justify-content: center; align-items: center; background-color: #fcc; }

 <div class="outer"><div class="inner">Active Tasks</div></div>

與僅適用於 Chrome 的這個比較：

 .outer { display: flex; width: 200px; height: 200px; background-color: #ffc; } .inner { display: flex; width: 50%; height: 50%; margin: auto; background-color: #fcc; }

 <div class="outer"> <div class="inner"><span style=" margin: auto;">Active Tasks</span></div> </div>

Answer 25

這將使文本垂直居中：

 .parent { display: inline-flex } .testimonialText { margin-top: auto; margin-bottom: auto; }

 <div class="parent"> <div class="testimonialText"> Hello World </div> </div>

Answer 26

這是在 CSS 中使用calc()的div模式中div的另一種變體。

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

這有效，因為：

• position:absolute用於在div中精確放置div
• 我們知道內部div的高度，因為我們將其設置為20px 。
• calc(50% - 10px) for 50% - 一半高度用於使內部div居中

Answer 27

這工作正常：

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

薩斯

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

沒有和有圖像標簽<mat-icon> （這是一種字體）。

Answer 28

您可以使用 css flexbox 。

 .testimonialText { height: 500px; padding: 1em; display: flex; align-items: center; justify-content: center; border: 1px solid #b4d2d2; }

 <div class="testimonialText"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

Answer 29

嗯，顯然有很多方法可以解決這個問題。

但是我有一個絕對定位的<div> ， height:100% （實際上是top:0;bottom:0和固定寬度）和display:table-cell只是不能垂直居中文本。 我的解決方案確實需要一個內部跨度元素，但我看到許多其他解決方案也需要，所以我不妨添加它：

我的容器是一個.label ，我希望數字在其中垂直居中。 我通過絕對定位在top:50%並設置line-height:0來做到這一點

<div class="label"><span>1.</span></div>

CSS如下：

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

在行動中看到它：http: //jsfiddle.net/jcward/7gMLx/

Answer 30

有幾個技巧可以在 div 的中心顯示內容或圖像。 有些答案真的很好，我也完全同意這些。

CSS中的絕對水平和垂直居中

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizo​​ntal-and-vertical-centering-in-css/

有10 多種技術示例。 現在由您決定您喜歡哪個。

毫無疑問， display:table; display:table-Cell display:table; display:table-Cell是一個更好的技巧。

一些好的技巧如下：

技巧 1 - 通過使用display:table; display:table-cell display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

CSS 代碼

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

技巧 2 - 通過使用display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

CSS 代碼

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

技巧 3 - 通過使用position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

Answer 31

如果您需要使用min-height屬性，則必須在以下位置添加此 CSS：

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}

Answer 32

嘗試嵌入表格元素。

 <div> <table style='width:200px; height:100px;'> <td style='vertical-align:middle;'> copenhagen </td> </table> </div>

Answer 33

CSS：

.vertical {
   display: table-caption;
}

將此類添加到包含要垂直對齊的內容的元素中