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

---

#1楼

您能够经过将显示设置为“表格单元”并应用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中容许的显示值。

---

#2楼

这是一个很好的资源

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

---

#3楼

若是须要使用min-height属性，则必须在如下位置添加此CSS：

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

---

#4楼

尝试嵌入表格元素。

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

---

#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的文本居中到200像素高的外部div的确切垂直中间。 请注意，您可能须要使用浏览器前缀（例如-webkit- ）来使此功能适用于您的浏览器。

这不只适用于文本，并且适用于其余元素。