html

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>

score 884 · Accepted Answer

在现代浏览器中执行此操作的正确方法是使用 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>

score 864 · Accepted Answer

您需要添加line-height属性，并且该属性必须与div. 在你的情况下：

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

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

事实上，您可以height完全删除该属性。

这仅适用于一行文本，所以要小心。

score 606 · Accepted Answer

这是一个很棒的资源

来自http://howtocenterincss.com/：

在 CSS 中居中是一件令人头疼的事情。取决于各种因素，似乎有无数种方法可以做到这一点。这将合并它们并为您提供每种情况所需的代码。

使用弹性盒

为了使这篇文章与最新技术保持同步，这里有一种使用 Flexbox 将内容居中的更简单的方法。Internet Explorer 9 和更低版本不支持 Flexbox 。

这里有一些很棒的资源：

带有浏览器前缀的 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>

score 211 · Accepted Answer

这很容易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>

您必须看到您需要的浏览器版本；在旧版本中，代码不起作用。

score 113 · Accepted Answer

我使用以下方法可以轻松地将随机元素垂直居中：

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%);
}

这会将 my 中的文本div居中到 200px 高的 outer 的确切垂直中间div。请注意，您可能需要使用浏览器前缀（例如-webkit-在我的情况下）才能使其适用于您的浏览器。

这不仅适用于文本，也适用于其他元素。

score 65 · Accepted Answer

65

试试这个，添加父 div：

display: flex;
align-items: center;

于 2018-05-15T19:05:56.007 回答

score 43 · Accepted Answer

您可以通过将显示设置为“table-cell”并应用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的允许显示值。

在此处输入图像描述

score 32 · Accepted Answer

这些天来（我们不再需要 Internet Explorer 6-7-8）我只会使用 CSSdisplay: 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; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    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>

score 22 · Accepted Answer

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>

score 11 · Accepted Answer

您可以使用显示网格和放置项目中心：

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

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

score 8 · Accepted Answer

这是一个最适合单行文本的解决方案。

如果行数已知，它也可以用于多行文本，并进行一些调整。

.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。

score 8 · Accepted Answer

<!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>

score 7 · Accepted Answer

您可以使用 Flexbox 在 div 内垂直对齐中心文本。

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

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

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

score 6 · Accepted Answer

检查这个简单的解决方案：

<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

score 5 · Accepted Answer

有一种更简单的方法可以垂直对齐内容，而无需使用表格/表格单元格：

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%;
}

score 5 · Accepted Answer

这是我找到的最干净的解决方案（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 即可垂直对齐任何内容

score 5 · Accepted Answer

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;
}

score 4 · Accepted Answer

一个不知道值的元素的简单解决方案：

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%);
}

score 4 · Accepted Answer

根据 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 */
}

另一个例子和博客文章中的一些解释。

score 4 · Accepted Answer

网格项目上的自动边距。

与 Flexbox 类似，在网格项上应用边距自动使其在两个轴上居中：

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

score 3 · Accepted Answer

采用：

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”来左对齐。

score 2 · Accepted Answer

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;
 }

score 2 · Accepted Answer

使用 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>

score 2 · Accepted Answer

使用 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>

score 2 · Accepted Answer

这将使文本垂直居中：

.parent {
  display: inline-flex
}

.testimonialText {
  margin-top: auto;
  margin-bottom: auto;
}

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

score 1 · Accepted Answer

这是在 CSSdiv中使用的div模式的另一种变体。calc()

<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:absolutediv用于在一个内的精确放置div
我们知道内部的高度，div因为我们将它设置为20px。
calc(50% - 10px)对于50% - 一半高度用于居中内部div

score 1 · Accepted Answer

这工作正常：

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>（这是一种字体）。

score 1 · Accepted Answer

您可以使用 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>

score 0 · Accepted Answer

嗯，显然有很多方法可以解决这个问题。

但是我有一个<div>绝对定位的height:100%（实际上是top:0;bottom:0固定宽度），display:table-cell只是无法垂直居中文本。我的解决方案确实需要一个内部跨度元素，但我看到许多其他解决方案也需要，所以我不妨添加它：

我的容器是 a .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/

score -1 · Accepted Answer

有几个技巧可以在 div 的中心显示内容或图像。有些答案真的很好，我也完全同意这些。

CSS中的绝对水平和垂直居中

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

有10 多种技术示例。现在由您决定您喜欢哪个。

毫无疑问，display:table; display:table-Cell是一个更好的把戏。

一些好的技巧如下：

技巧 1 - 通过使用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&nbsp;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>

score -2 · Accepted Answer

如果您需要使用该min-height属性，则必须在以下位置添加此 CSS：

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

score -2 · Accepted Answer

尝试嵌入表格元素。

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

score -2 · Accepted Answer

CSS：

.vertical {
   display: table-caption;
}

将此类添加到包含要垂直对齐的内容的元素中

html - 如何垂直对齐div中的文本？

33 回答 33

在现代浏览器中执行此操作的正确方法是使用 Flexbox。

这是一个很棒的资源

使用弹性盒

另一种解决方案

上一个答案

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

HTML：

CSS：

对于旧版浏览器：

HTML

CSS

HTML

萨斯

Related

Reference