如何在div中垂直对齐文本？

我试图找到最有效的方法来将文本与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>

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>

您需要添加line-height属性，并且该属性必须与的高度匹配div。在您的情况下：

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

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

实际上，您可能会height完全删除该属性。

不过，这仅适用于一行文本，因此请小心。

这是一个很好的资源

从http://howtocenterincss.com/：

以CSS为中心是一个麻烦。取决于各种因素，似乎有数不胜数的方法可以做到这一点。这样可以合并它们，并为您提供每种情况所需的代码。

使用Flexbox

保持最新信息与最新技术保持一致，这是使用Flexbox集中内容的一种简单得多的方法。Internet Explorer 9及更低版本不支持Flexbox 。

这里有一些很棒的资源：

• Flexbox指南
• Flexbox的居中元素
• Flexbox的Internet Explorer 10语法
• 对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。有两种特殊的样式表（一种用于Internet Explorer 7，另一种用于Internet Explorer 6），因为它们的CSS限制（现代浏览器没有）可以帮助他们。

安迪·霍华德（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>

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

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

我使用以下内容轻松使随机元素垂直居中：

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高的external的确切垂直中间div。请注意，您可能需要使用浏览器前缀（例如-webkit-我的情况）才能使此功能适用于您的浏览器。

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

您可以通过将显示设置为“表格单元格”并应用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” -group”和“继承”不受Internet Explorer 7和更早版本的支持。Internet Explorer 8需要！DOCTYPE。Internet Explorer 9支持这些值。

下表还显示了http://www.w3schools.com/cssref/pr_class_display.asp中允许的显示值。

这些天（我们不再需要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; /* <-- 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>

试试这个，添加父div：

display: flex;
align-items: center;

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

如果知道行数，它也可以对多行​​文本进行一些调整。

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

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

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

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

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

您可以在《 Flexbox完整指南》中了解更多信息。

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

的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

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

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

在其中我添加了一个不可见的（width = 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%;
}

这是我发现的最干净的解决方案（Internet Explorer 9+），并使用transform-style其他答案已被省略的方法添加了针对“偏离.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垂直对齐所有内容

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

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

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

在博客文章中有另一个示例和一些解释。

网格项目上的边距自动。

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

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

Flexbox对我来说效果非常理想，它可以将Parent div中的多个元素水平和垂直地居中。

HTML代码：

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

CSS代码：
以下代码将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;
}

采用：

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

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

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

这是CSS div中使用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:absolute对的精确放置div内的div
• 我们知道内部的高度，div因为我们将其设置为20px。
• calc(50% - 10px)为50％ -高度的一半为中心的内div

这工作正常：

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

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

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

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

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

使用CSS网格为我做到了：

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

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

尝试嵌入表格元素。

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

有一些技巧可以在div的中心显示内容或图像。一些答案非常好，我也完全同意。

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

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

有十多种技术实例。现在由您决定。

毫无疑问，这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 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>

CSS：

.vertical {
   display: table-caption;
}

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

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

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