CSS 在 div 中居中文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6055412/
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
Center text in div?
提问by Rifki
I have a div30pxhigh and 500pxwide. This divcan contain two lines of text one under the other, and is styled (padded) accordingly. But sometimes it only contains one line, and I want it to be centered. Is this possible?
我有一个又div30px高又500px宽。这div可以包含两行文本，一行在另一行之下，并相应地设置样式（填充）。但有时它只包含一行，我希望它居中。这可能吗？
采纳答案by G.K.
You may try to use in your CSS the property vertical-align in order to center it verticaly
您可以尝试在 CSS 中使用属性 vertical-align 以使其垂直居中
div {
vertical-align:middle;
}
if it's a size problem, please notice that 2 text lines and a padding style have great chance to have a height superior to 30px.
如果是尺寸问题，请注意 2 个文本行和一个填充样式很有可能使高度超过 30 像素。
For example, if your font size is 12 px and your div padding is 5 px, a one text line div height will be 5px (padding-top) + 12px + 5 px (padding-bottom) = 22px < 30px so no problem,
例如，如果你的字体大小是 12 px，你的 div 填充是 5 px，一个文本行的 div 高度将是 5px (padding-top) + 12px + 5 px (padding-bottom) = 22px < 30px 所以没问题，
With a 2 text lines div, it will be 5px +12px *2 (2 lines) + 5px = 34px > 30px and your div height will be automatically changed.
使用 2 个文本行 div，它将是 5px +12px *2（2 行）+ 5px = 34px > 30px，您的 div 高度将自动更改。
Try either to increase your div height (maybe 40px) or to reduce your padding.
尝试增加 div 高度（可能是 40 像素）或减少填充。
Hope it will help
希望它会有所帮助
回答by SamGoody
To center horizontally, use text-align:center.
要水平居中，请使用text-align:center。
To center vertically, one can only use vertical-align:middleif there is another element in the same row that it is being aligned to.
See it working here.
要垂直居中，只有vertical-align:middle在与它对齐的同一行中有另一个元素时才能使用。
看到它在这里工作。
We use an empty span with a height of 100%, and then put the content in the next element with a vertical-align:middle.
我们使用一个高度为 100% 的空跨度，然后将内容放在下一个带有 vertical-align:middle 的元素中。
There are other techniques such as using table-cell or putting the content in an absolutely positioned element with top, bottom, left, and right all set to zero, but they all suffer from cross browser compatibility issues.
还有其他技术，例如使用表格单元格或将内容放在绝对定位的元素中，顶部、底部、左侧和右侧都设置为零，但它们都存在跨浏览器兼容性问题。
回答by michelegera
I believe you want the text to be vertically centered inside your div, not (only) horizontally. The only reliable way I know of doing this is using:
我相信您希望文本在 div 内垂直居中，而不是（仅）水平居中。我知道这样做的唯一可靠方法是使用：
display: table-cell;
vertical-align: middle;
on your div, and it works with any number of lines. You can see a test here: http://jsfiddle.net/qMtZV/1/
在您的 div 上，它适用于任意数量的行。你可以在这里看到一个测试：http: //jsfiddle.net/qMtZV/1/
Be sure to check browser support of this property, as it is not supported — for example — in IE7 or earlier.
请务必检查浏览器对此属性的支持，因为它不受支持 - 例如 - 在 IE7 或更早版本中。
UPDATE 02/10/2016
更新 02/10/2016
Five years later this technique is still valid, but I believe there are better and more solid solutions to this problem. Since Flexboxsupport is good nowadays, you might want to do something along these lines: http://codepen.io/michelegera/pen/gPZpqE.
五年后，这项技术仍然有效，但我相信这个问题有更好、更可靠的解决方案。由于现在对Flexbox 的支持很好，您可能希望按照以下方式做一些事情：http: //codepen.io/michelegera/pen/gPZpqE。
回答by Lars
HTML
HTML
<div class="outside">
<div class="inside">
<p>Centered Text</p>
</div>
</div>
CSS
CSS
.outside {
position: absolute;
display: table;
}
.inside {
display: table-cell;
vertical-align: middle;
text-align: center;
}
回答by enigma969
If you have text inside a <div>:
如果您在 a 中有文字<div>：
text-align: center;
vertical-align: middle;
display: table-cell;
回答by Ayan
For the parent div,use following CSS:
对于父 div，使用以下 CSS：
style="display: flex;align-items: center;"
回答by Henry Zhu
div {
height: 256px;
width: 256px;
display: table-cell;
text-align: center;
line-height: 256px;
}
The trick is to set the line-heightequal to the heightof the div.
诀窍是将 设置为line-height等于height的div。
回答by Schw2iizer
Adding line height helps too.
添加行高也有帮助。
text-align: center;
line-height: 18px; /* for example. */
回答by Adam Moss
I may be missing something here, but have you tried:
我可能在这里遗漏了一些东西，但你有没有试过：
text-align:center;
??
??
回答by kaveman
Will this work for you?
这对你有用吗？
div { text-align: center; }
