Html 如何垂直居中div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4416130/
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 to center a div vertically?
提问by trrrrrrm
I have a divthat I want to center horizontally and vertically.
我有一个div我想水平和垂直居中。
For the horizontal issue everything is great, but I have a problem with the vertical alignment.
对于水平问题，一切都很好，但我在垂直对齐方面有问题。
I tried this:
我试过这个：
#parent {
display: table;
}
#child {
display: table-row;
vertical-align: middle;
}
but this doesn't work.
但这不起作用。
回答by alex
If you only have to support browsers that support transform(or its vendor prefixed versions), use this one weird old trick to vertically align elements.
如果您只需要支持支持transform（或其供应商前缀版本）的浏览器，请使用这个奇怪的老技巧来垂直对齐元素。
#child {
position: relative;
top: 50%;
transform: translateY(-50%);
}
If you have to support older browsers, you can use a combination of these, but they can be a pain due to the differences in rendering blockvs table.
如果您必须支持较旧的浏览器，则可以组合使用这些浏览器，但由于渲染block与table.
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
If your height is fixed and you need to support those really old, pesky browsers...
如果你的身高是固定的，并且你需要支持那些非常老的、讨厌的浏览器......
#parent {
position: relative;
}
#child {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
If your height is not fixed, there is a workaround.
如果您的高度不固定，则有一个解决方法。
回答by Abz
Having the parent property as, display:tableand child property as display: table-celland vertical-align: middleworked for me.
拥有父财产display:table和子财产，display: table-cell并vertical-align: middle为我工作。
回答by jpsimons
First off, treating non-table markup as tables (with display:table and friends) isn't cross-browser. I don't know which browsers you need to support but certainly IE6 won't do this. But, if your targeted browser doall support display:table I can give you some tips.
首先，将非表格标记视为表格（带有 display:table 和朋友）不是跨浏览器的。我不知道您需要支持哪些浏览器，但 IE6 肯定不会这样做。但是，如果你的目标浏览器做的都支持显示：表我可以给你一些提示。
The vertical centering approach you're looking for (using table layout) depends on having a TD with vertical-align:middle, then inside of that a single block element will vertically center. So I think what you want is:
您正在寻找的垂直居中方法（使用表格布局）取决于具有垂直对齐：中间的 TD，然后在其中一个块元素将垂直居中。所以我认为你想要的是：
#parent { display:table-cell; vertical-align:middle; }
#child { /* nothing necessary, assuming it's a DIV it's already display:block */ }
It's ok to use table-cell with no surrounding table-row and table, the browser infers the needed table wrapping elements for you.
可以使用没有周围表格行和表格的表格单元格，浏览器会为您推断所需的表格包装元素。
回答by juanm55
here is another way when you don't know the inner div size or whatever, you may use % here and there to fix the "centering" ....
这是当您不知道内部 div 大小或其他任何内容时的另一种方法，您可以在这里和那里使用 % 来修复“居中”....
the idea is that your top value is half the height of your child element as to create the centering illusion
这个想法是你的最高值是你的子元素高度的一半，以创造居中的错觉
Here's the code:
这是代码：
<div id="parent">
<div id="child">
hello
</div>
</div>
and for the styling:
和样式：
#parent {
position: relative;
height: 300px;
width:200px;
background-color:green;
}
#child {
height: 50%;
width: 50%;
position:relative;
top:25%;
left:25%;
background-color:red;
}
Here you can see it in action http://jsfiddle.net/Wabxv/
在这里你可以看到它在行动 http://jsfiddle.net/Wabxv/
