Html 如何使用 CSS 垂直居中文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8714371/
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
How do I center text vertically with CSS?
提问by NomenNescio
I've tried to find how to center text vertically, but I can't find a satisfactory answer. The best answer I found until now is this. This makes it look like it allows me to center text vertically, but if I use this and I add more text, it is only extended to the bottom and not being re-centered, like what happens horizontally.
我试图找到如何垂直居中文本，但找不到满意的答案。到目前为止，我找到的最佳答案是这个。这使它看起来允许我垂直居中文本，但如果我使用它并添加更多文本，它只会扩展到底部而不是重新居中，就像水平发生的那样。
Note, I'm looking for a CSS-only solution, so no JavaScript please. Note, I want to be able to add multiple lines of text.
请注意，我正在寻找仅使用 CSS 的解决方案，因此请不要使用 JavaScript。请注意，我希望能够添加多行文本。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
div#maindiv {
width: 810px;
height: 99px;
background-color: black;
margin: 0px;
padding: 0px;
color: white;
font-family: Sans-serif;
text-align: center;
display: table;
}
div#maindiv span {
font-size: 1.1em;
}
div#part1 {
width: 270px;
height: 99px;
background-color: #6DCAF2;
float: left;
vertical-align: middle;
position: relative;
}
div#horizon1 {
background-color: green;
height: 1px;
left: 0;
overflow: visible;
position: absolute;
text-align: center;
top: 50%;
visibility: visible;
width: 100%;
}
div#content1 {
background-color: green;
height: 99px;
width: 270px;
position: absolute;
top: -50px;
}
</style>
<title>XHTML-Strict</title>
</head>
<div id="maindiv">
<body>
<div id="part1">
<div id="horizon1">
<div id="content1">
<div id="bodytext1">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor augue, faucibus quis sagittis
<span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In the end, I want to have three blocks, each of them centering the text in the middle. These texts are edited by clients so they have to be able to span over multiple lines. Currently the text starts at the top of the box and goes to the bottom, in the end, I want the text to start at a point so the centre of the body of the text is positioned at the center of the box.
最后，我想要三个块，每个块都将文本居中。这些文本由客户编辑，因此它们必须能够跨越多行。目前文本从框的顶部开始到底部，最后，我希望文本从一个点开始，以便文本正文的中心位于框的中心。
My final solution,
我的最终解决方案，
Note: vertical-align does not work if you have float:leftin the same div.
注意：如果您float:left在同一个 div 中，则垂直对齐不起作用。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
div#maindiv {
width: 810px;
height: 99px;
background-color: black;
margin: 0px;
padding: 0px;
color: white;
font-family: Sans-serif;
}
div#maindiv span {
font-size: 1.1em;
}
div.part {
width: 262px;
height: 99px;
padding: 0px;
margin: 0px;
padding: 4px;
border: 0px;
color: white;
text-align: center;
display: table-cell;
vertical-align: middle;
}
div.bgc1 {
background-color: #6DCAF2;
}
div.bgc2 {
background-color: #2A4B9A;
}
div.bgc3 {
background-color: #FF8A00;
}
</style>
<title>XHTML-Strict</title>
</head>
<div id="maindiv">
<body>
<div style="float: left;">
<div class="part bgc1">
<span>
Vegeta! What does the scouter say about his power level?!
</span>
</div>
</div>
<div style="float:left;">
<div class="part bgc2">
<span>
It's over NINE THOUSAAAAAAAAAND!
</span>
</div>
</div>
<div style="float:left;">
<div class="part bgc3">
<span>
What NINE THOUSAND? There is no way that can be right!
</span>
</div>
</div>
</div>
</body>
</html>
回答by
Well, there are several solutions.
嗯，有几种解决方案。
The easiest is
最简单的是
#centerme
{
// Will center the text vertically, but looks bad with multiliners
line-height: 20em;
}
For multi-liners, you need to position a-box-in-a-box
对于多班轮，您需要将 a-box-in-a-box 定位
#parentbox
{
// We need the "parent" to have some kind of height
height: 20em;
// The most important... position children "relative" to the parent
position:relative;
}
.childbox
{
position: absolute;
left: 0;
top: 50%;
margin-top: -5em; // This pulls the child back "up" to the vertical center
}
The problem here is that the "height" of your multi-liner must be known (or at least guessed), so it actually centers vertical.
这里的问题是必须知道（或至少是猜测）多线的“高度”，因此它实际上是垂直居中的。
What you need to know
你需要知道的
There is no pure CSS way to know about the height of an element, which would then allow us to center it vertically in an "adaptive" way!
没有纯 CSS 方法可以知道元素的高度，这将允许我们以“自适应”方式将其垂直居中！
This means that when you change the text, you must change the CSS too to make sure it all still fits.
这意味着当您更改文本时，您也必须更改 CSS 以确保它仍然适合。
This can be annoying and that's where and why most people fall back on using JavaScript to work around this CSS annoyance of "a missing feature". In the end, JavaScript makes it easier on us all (at least in these kind of cases).
这可能很烦人，这就是大多数人回到使用 JavaScript 来解决 CSS “缺失功能”的烦恼的地方和原因。最后，JavaScript 使我们所有人都变得更容易（至少在这种情况下）。
More
更多的
There's a lot of Q&A about this going on around the web and around this website. In case you missed them, here are some:
在网络和本网站上有很多关于此的问答。如果你错过了它们，这里有一些：
- How to center text vertically in HTML using CSS only
- CSS Vertically & Horizontally Center Div
- Center Text Vertically Within <DIV>
- How to vertically and horizontally center a P of text in the page
And there are many more; all providing individual solutions to individual cases. Those will help you get a bit more confident (as you initially stated you're new to this kind of CSS fiddling).
还有更多；所有这些都为个别案例提供个性化的解决方案。这些将帮助您更加自信（正如您最初所说，您是这种 CSS 摆弄的新手）。
回答by ptriek
You could set your container to display:table-celland add vertical-align:middle:
您可以将容器设置为display:table-cell并添加vertical-align:middle：
http://jsfiddle.net/ptriek/h5j7B/1
http://jsfiddle.net/ptriek/h5j7B/1
(But Internet Explorer 7 and below won't like this...)
（但 Internet Explorer 7 及以下版本不会这样...）
回答by Arrabi
<div style="height:50px;line-height:50px;">
Text
</div>
回答by Christopher Marshall
You can use line-heightequal to that of its parent container.
您可以使用line-height等于其父容器的。
For example,
例如，
<div style="height:32px;>
<p style="line-height:32px;">Text</p>
</div>
You would want these in an external CSS sheet.
您会希望这些在外部 CSS 表中。
If I'm understanding your question correctly.
如果我正确理解你的问题。
