如何在 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

文章摘要：

对于 CSS2 浏览器，可以使用display:table / display:table-cell to center content。

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>

可以将旧浏览器（IE6 / 7）的黑客合并到样式中，使用#隐藏新浏览器的样式：

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 中心化。 IE9 and lower不支持 Flexbox。

这里有一些很棒的资源：

jsfiddle 与浏览器前缀

HTML

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

CSS

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

更新 - 另一个解决方案

这是来自zerosixthree ，让你以 6 行 css 为中心

IE8 and lower不支持此方法

的 jsfiddle

HTML

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

CSS

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

以前的答案

简单和跨浏览器方法，作为标记答案中的链接有用略微过时。

如何在无序列表和 div 中垂直和水平居中文本而不使用 JavaScript 或 css 行高 。无论您有多少文本，您都不必将任何特殊类应用于特定列表或 div（每个代码都相同）。这适用于所有主流浏览器，包括 IE9，IE8，IE7，IE6，Firefox，Chrome，Opera 和 Safari。由于现代浏览器没有的 css 限制，有 2 个特殊样式表（IE7 为 1，IE6 为另一个）以帮助他们。

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

编辑：因为我对上一个项目的 IE7 / 6 并不在意，我使用了一个稍微剥离的版本（即删除了使它在 IE7 和 6 中工作的东西）。可能对其他人有用......

的 jsfiddle

HTML

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

而 CSS：

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