Html 在 <DIV> 内垂直居中文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7616969/
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 Vertically Within <DIV>
提问by Jonathan Wood
I have a <div>element with a fixed height, and I'd like to center some text vertically within that element.
我有一个<div>固定高度的元素，我想在该元素内垂直居中一些文本。
I've been trying to follow the instructions at http://phrogz.net/css/vertical-align/index.html. However, it doesn't seem to work for me.
我一直在尝试按照http://phrogz.net/css/vertical-align/index.html 上的说明进行操作。但是，它似乎对我不起作用。
I've posted what I'm trying at http://jsfiddle.net/scwebgroup/74Rnq/. If I change the HeaderBrand's margin-top to about -22px, it seems about right.
我已经在http://jsfiddle.net/scwebgroup/74Rnq/发布了我正在尝试的内容。如果我将 HeaderBrand 的 margin-top 更改为大约 -22px，似乎是正确的。
Can anyone see why the technique described in the article is not working as expected for me?
谁能明白为什么文章中描述的技术对我来说没有按预期工作？
Note: The best answer hereonly works if the text doesn't wrap to a second line.
注意：此处的最佳答案仅适用于文本未换行到第二行的情况。
采纳答案by Matijs
This:
这个：
<!DOCTYPE html>
<style>
.outer { outline: 1px solid #eee; }
.outer > p { display: table-cell; height: 200px; vertical-align: middle; }
</style>
<div class="outer">
<p>This text will be vertically aligned</p>
</div>
<div class="outer">
<p>This longer text will be vertically aligned. Assumenda quinoa cupidatat messenger bag tofu. Commodo sustainable raw denim, lo-fi keytar brunch high life nisi labore 3 wolf moon readymade eiusmod viral. Exercitation velit ex, brooklyn farm-to-table in hoodie id aliquip. Keytar skateboard synth blog minim sed. Nisi do wes anderson seitan, banksy sartorial +1 cliche. Iphone scenester tumblr consequat keffiyeh you probably haven't heard of them, sartorial qui hoodie. Leggings labore cillum freegan put a bird on it tempor duis.</p>
</div>
works in modern browsers, regardless of whether text spans only one or multiple lines.
可在现代浏览器中使用，无论文本仅跨越一行还是多行。
Also updated the fiddle at http://jsfiddle.net/74Rnq/135/Not sure what you were doing with a 625px margin on the left when the thing itself was only 150px in width… Tidied things up a bit by removing the inline styling and using a bit of padding as well.
还更新了http://jsfiddle.net/74Rnq/135/的小提琴，当东西本身的宽度只有 150 像素时，不确定你在左边用 625 像素的边距做了什么……通过删除内联样式来整理一下并使用一些填充。
回答by James Johnson
You can try setting the line-height to the height of the div, like this:
您可以尝试将 line-height 设置为 div 的高度，如下所示：
<div style="height:200px;border:1px solid #000;">
<span style="line-height:200px;">Hello world!</span>
</div>
Here's another technique that seems to work:
这是另一种似乎有效的技术：
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
}
<div style="position:relative;height:200px;">
<div id="vertical">
Hello world!
</div>
</div>
回答by DACrosby
I know this method adds some HTML, but it seems to work in all major browsers (even IE7+).
我知道这种方法添加了一些 HTML，但它似乎适用于所有主要浏览器（甚至 IE7+）。
Basic HTML Structure
基本 HTML 结构
<div id="hold">
<div>Content</div>
<div class="aligner"> </div>
</div>?
Require CSS
需要 CSS
#hold{
height:400px;
}
div{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align:middle;
}
.aligner{
width:0px;
height:100%;
overflow:hidden;
}?
回答by Funnygamera1ex
As shown below you can easily just set the parent of a text element to position: relative, and the text element itself to position: absolute; Then use direction properties to move around the text inside the parent. See examples below...
如下所示，您可以轻松地将文本元素的父元素设置为 position:relative，并将文本元素本身设置为 position: absolute；然后使用方向属性在父级内的文本周围移动。请参阅下面的示例...
<!--Good and responsive ways to center text vertically inside block elements-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Centered Text®</title>
<style type="text/css">
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica;
}
#wrapper {
width: 100%;
height: auto;
}
#wrapper > div {
margin: 40px auto;
overflow: hidden;
position: relative;
height: 100px;
width: 50%;
}
p {
position: absolute;
word-wrap: break-word;
text-align: center;
color: white;
background-color: rgba(0,0,0,0.5);
}
#parent1 {
background-color: orange;
}
#parent1 p {
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
height: auto;
width: auto;
padding-top: 30px; /* Parent1's height * 0.5 = parent1 p's padding-top (Adjust to make look more centered) */
}
#parent2 {
background-color: skyblue;
}
#parent2 p {
left: 50%;
top: 50%;
padding: 10px;
transform: translate(-50%, -50%);
}
#parent3 {
background-color: hotpink;
}
#parent3 p {
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="parent1">
<p>Center Method 1</p>
</div>
<div id="parent2">
<p>Center Method 2</p>
</div>
<div id="parent3">
<p>Center Method 3</p>
</div>
</div>
</body>
</html>回答by AManOfScience
I was recently delighted to find that Flexbox can handle this problem for you. The flex-centerclass in the CSS below will center your div's text, both vertically and horizontally. The example comes out a little smashed, so I recommend resizing the window until the div border isn't flush to the text.
我最近很高兴地发现 Flexbox 可以为您处理这个问题。flex-center下面 CSS 中的类将垂直和水平居中您的 div 文本。这个例子有点烂，所以我建议调整窗口的大小，直到 div 边框不与文本齐平。
As far as whether you can get away with using flexbox regarding compatibility, see Can I use...
至于您是否可以在兼容性方面使用 flexbox，请参阅我可以使用...
I don't fully understand whythis works, and if someone has more insight into the flex box machinery, I'd enjoy the explanation.
我不完全理解为什么会这样，如果有人对 flex box 机制有更深入的了解，我会喜欢这个解释。
.border-boxed {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
/* This is just to make it look pretty */
box-sizing: border-box;
background: linear-gradient(135deg,
rgba(85,239,203,1) 0%,
rgba(30,87,153,1) 0%,
rgba(85,239,203,1) 0%,
rgba(91,202,255,1) 100%);
color: #f7f7f7;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: .8rem;
/* Expand <body> to entire viewport height */
height: 100vh;
/* Arrange the boxes in a centered, vertical column */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 25%;
height: 25%;
border: 2px solid #f7f7f7;
border-radius: 16px;
margin: .5rem;
text-transform: uppercase;
text-align: center;
}
.small {
height: 8%;
}<div class="box large flexitem flex-center">
Large Box. <br>
So big. <br>
My god.
</div>
<div class="box small flexitem flex-center">
Smaller Box
</div>回答by Joseph Marikle
One method with your current setup is to set the margin-top to -25%
当前设置的一种方法是将 margin-top 设置为 -25%
the only reason why it looks offish is because the position is based off of the top of the text and there is a necessary gap because not all letters are the same height.
它看起来不合时宜的唯一原因是因为位置基于文本的顶部，并且存在必要的间隙，因为并非所有字母的高度都相同。
As A manual fix -30% looks better. :P
作为手动修复 -30% 看起来更好。:P
回答by Jonathan Wood
I was unable to determine the reason why the code in the article I referenced would not work for me. A couple of people offered answers but nothing that struck me as reliable across browsers.
我无法确定我引用的文章中的代码对我不起作用的原因。有几个人提供了答案，但没有什么让我觉得跨浏览器可靠。
Ultimately, I decided to keep my text on one line, which I do not like as much. But I do need my technique to be clear and well-understood, and for it to work reliably.
最终，我决定将我的文字保持在一行，我不太喜欢它。但我确实需要我的技术清晰易懂，并使其可靠地工作。
