CSS 垂直对齐 div 中的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9249359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically align text within a div
提问by Cyclone
The code below (also available as a demo on JS Fiddle) does not position the text in the middle, as I ideally would like it to. I cannot find any way to vertically centre text in a div, even using the margin-topattribute. How can I do this?
下面的代码（也可作为JS Fiddle 上的演示提供）没有将文本放在中间，这是我理想中想要的。我找不到任何方法将 a 中的文本垂直居中div，即使使用该margin-top属性也是如此。我怎样才能做到这一点？
<div id="column-content">
<img src="http://i.stack.imgur.com/12qzO.png">
<strong>1234</strong>
yet another text content that should be centered vertically
</div>
#column-content {
display: inline-block;
border: 1px solid red;
position:relative;
}
#column-content strong {
color: #592102;
font-size: 18px;
}
img {
margin-top:-7px;
vertical-align: middle;
}
采纳答案by Andres Ilich
Create a container for your text content, a spanperhaps.
为您的文本内容创建一个容器，span也许。
#column-content {
display: inline-block;
}
img {
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
}
/* for visual purposes */
#column-content {
border: 1px solid red;
position: relative;
}<div id="column-content">
<img src="http://i.imgur.com/WxW4B.png">
<span><strong>1234</strong>
yet another text content that should be centered vertically</span>
</div>回答by Jenny O'Reilly
Andres Ilich has it right. Just in case someone misses his comment...
安德烈斯·伊里奇说得对。以防万一有人错过了他的评论......
A.) If you only have one line of text:
A.) 如果您只有一行文本：
div
{
height: 200px;
line-height: 200px; /* <-- this is what you must define */
}<div>vertically centered text</div>B.) If you have multiple lines of text:
B.) 如果您有多行文本：
div
{
height: 200px;
line-height: 200px;
}
span
{
display: inline-block;
vertical-align: middle;
line-height: 18px; /* <-- adjust this */
}<div><span>vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text</span></div>回答by Omar Tariq
Update April 10, 2016
2016 年 4 月 10 日更新
Flexboxes should now be used to vertically (or even horizontally) align items.
Flexboxes 现在应该用于垂直（甚至水平）对齐项目。
<div class="flex-container">
<div class="flex-item">Item</div>
<div class="flex-item">Item</div>
<div class="flex-item">Item</div>
<div class="flex-item">Item</div>
</div>
<style>
.flex-container {
display: flex;
align-items: center; /* Vertical center alignment */
justify-content: center; /* Horizontal center alignment */
}
</style>
A good guide to flexbox can be read on CSS Tricks. Thanks Ben (from comments) for pointing it out. I didn't have time to update.
一个很好的 flexbox 指南可以在CSS Tricks上阅读。感谢 Ben（来自评论）指出这一点。我没有时间更新。
A good guy named Mahendra posted a very working solution here.
一个名叫 Mahendra 的好人在这里发布了一个非常有效的解决方案。
The following class should make the element horizontally and vertically centered to its parent.
下面的类应该使元素水平和垂直居中于其父级。
.absolute-center {
/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
回答by Eduard Gamonal
The accepted answer doesn't work for multi-line text.
接受的答案不适用于多行文本。
I updated the JSfiddle to show CSS multiline text vertical alignas explained here:
我更新了的jsfiddle显示CSS多行文本垂直对齐的解释在这里：
<div id="column-content">
<div>yet another text content that should be centered vertically</div>
</div>
#column-content {
border: 1px solid red;
height: 200px;
width: 100px;
}
div {
display: table-cell;
vertical-align:middle;
text-align: center;
}
It also works with <br />in "yet another..."
它也适用<br />于“又一个……”
回答by Petr Voborník
Try this:
尝试这个：
HTML
HTML
<div><span>Text</span></div>
CSS
CSS
div {
height: 100px;
}
span {
height: 100px;
display: table-cell;
vertical-align: middle;
}
回答by user2931920
To make Omar's (or Mahendra's) solution even more universal, the block of code relative to Firefox should be replaced by the following:
为了使 Omar（或 Mahendra）的解决方案更加通用，与 Firefox 相关的代码块应替换为以下内容：
/* Firefox */
display: flex;
justify-content: center;
align-items: center;
The problem with Omar's code, otherwise operative, arises when you want to center the box in the screen or in its immediate ancestor. This centering is done either by setting its position to
当您想要将框在屏幕或其直接祖先中居中时，会出现 Omar 代码的问题，否则会起作用。这种居中是通过将其位置设置为
position: relative;or position:static;(not with position:absolute nor fixed).
position: relative;或position:static;（不与位置：绝对或固定）。
And then margin: auto;or margin-right: auto; margin-left: auto;
然后保证金：自动；或边距右：自动；左边距：自动；
Under this box center aligning environment, Omar's suggestion does not work. It doesn't work either in Internet Explorer 8 (yet 7.7% market share). So for Internet Explorer 8 (and other browsers), a workaround as seen in other above solutions should be considered.
在这种盒子中心对齐的环境下，奥马尔的建议是行不通的。它在 Internet Explorer 8 中也不起作用（但市场份额为 7.7%）。因此，对于 Internet Explorer 8（和其他浏览器），应考虑在上述其他解决方案中看到的解决方法。
回答by ParPar
This is simply supposed to work:
这只是应该工作：
#column-content {
--------
margin-top: auto;
margin-bottom: auto;
}
I tried it on your demo.
我在你的演示上试过了。
回答by Hashbrown
This is the simplest way to do it if you need multiple lines. Wrap you span'd text in another spanand specify its height with line-height. The trick to multiple lines is resetting the inner span's line-height.
如果您需要多行，这是最简单的方法。将您span的文本包裹在另一个中，span并用 指定其高度line-height。多行的技巧是重置内部span的line-height.
<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>
.textvalignmiddle {
line-height: /* Set height */;
}
.textvalignmiddle > span {
display: inline-block;
vertical-align: middle;
line-height: 1em; /* Set line height back to normal */
}
Of course the outer spancould be a divor what have you.
当然，外部span可能是一个div或你有什么。
回答by scessor
Add a vertical align to the CSS content #column-content strongtoo:
也向 CSS 内容添加垂直对齐#column-content strong：
#column-content strong {
...
vertical-align: middle;
}
Also see your updated example.
另请参阅您更新的示例。
=== UPDATE ===
=== 更新 ===
With a span around the other text and another vertical align:
在另一个文本周围有一个跨度，另一个垂直对齐：
HTML:
HTML：
... <span>yet another text content that should be centered vertically</span> ...
CSS:
CSS：
#column-content span {
vertical-align: middle;
}
Also see the next example.
另请参阅下一个示例。
回答by lars at upstruct
I know it's totally stupid and you normally really shouldn't use tables when not creating tables, but:
我知道这完全是愚蠢的，你通常真的不应该在不创建表时使用表，但是：
Table cells can align multiple lines of text vertically centered and even do this by default. So a solution which works quite fine could be something like this:
表格单元格可以垂直居中对齐多行文本，默认情况下甚至可以这样做。所以一个工作得很好的解决方案可能是这样的：
HTML:
HTML：
<div class="box">
<table class="textalignmiddle">
<tr>
<td>lorem ipsum ...</td>
</tr>
</table>
</div>
CSS (make the table item always fit to the box div):
CSS（使表格项始终适合框 div）：
.box {
/* For example */
height: 300px;
}
.textalignmiddle {
width: 100%;
height: 100%;
}
See here: http://www.cssdesk.com/LzpeV
请参阅此处：http: //www.cssdesk.com/LzpeV
