CSS 如何垂直居中div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2743989/
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 vertically center divs?
提问by Crays
I'm trying to make a small username and password input box.
我正在尝试制作一个小的用户名和密码输入框。
I would like to ask, how do you vertically align a div?
我想问一下，如何垂直对齐一个div？
What I have is:
我所拥有的是：
<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>
How can I make the div with id Username and Form to vertically align itself to the center? I've tried to put:
如何使带有 id Username 和 Form 的 div 与中心垂直对齐？我试图把：
vertical-align: middle;
in CSS for the div with id Login, but it doesn't seem to work. Any help would be appreciated.
在带有 id 登录的 div 的 CSS 中，但它似乎不起作用。任何帮助，将不胜感激。
回答by Andy E
The best approach in modern browsers is to use flexbox:
现代浏览器中最好的方法是使用 flexbox：
#Login {
display: flex;
align-items: center;
}
Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.
一些浏览器需要供应商前缀。对于不支持 flexbox 的旧浏览器（例如 IE 9 及更低版本），您需要使用旧方法之一实现回退解决方案。
Recommended Reading
推荐阅读
回答by patmood
This can be done with 3 lines of CSS and is compatible back to (and including) IE9:
这可以用 3 行 CSS 来完成，并且兼容（包括）IE9：
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Example: http://jsfiddle.net/cas07zq8/
回答by Lalit Kumar Maurya
You can vertically align a div in another div. See this example on JSFiddleor consider the example below.
您可以在另一个 div 中垂直对齐一个 div。请参阅JSFiddle 上的此示例或考虑以下示例。
HTML
HTML
<div class="outerDiv">
<div class="innerDiv"> My Vertical Div </div>
</div>
CSS
CSS
.outerDiv {
display: inline-flex; // <-- This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white;
}
.innerDiv {
margin: auto 5px; // <-- This is responsible for vertical alignment
background-color: green;
}
The .innerDiv's margin must be in this format: margin: auto *px;
该.innerDiv“保证金必须是以下格式：margin: auto *px;
[Where, *is your desired value.]
[哪里，*是你想要的值。]
display: inline-flexis supported in the latest (updated/current version) browsers with HTML5 support.
display: inline-flex支持 HTML5 的最新（更新/当前版本）浏览器支持。
It may not work in Internet Explorer :P :)
它可能无法在 Internet Explorer 中工作 :P :)
Always try to define a height for any vertically aligned div (i.e. innerDiv) to counter compatibility issues.
始终尝试为任何垂直对齐的 div（即 innerDiv）定义高度以解决兼容性问题。
回答by Overcode
I'm pretty late to the party, but I came up with this myself and it's one of my favorite quick hacks for vertical alignment. It's crazy simple, and easy to understand what's going on.
我参加聚会已经很晚了，但我自己想出了这个，这是我最喜欢的垂直对齐快速技巧之一。这非常简单，而且很容易理解发生了什么。
You use the :beforecss attribute to insert a div into the beginning of the parent div, give it display:inline-blockand vertical-align:middleand then give those same properties to the child div. Since vertical-alignis for alignment along a line, those inline divs will be considered a line.
您可以使用:beforeCSS属性插入div到父div的开始，给它display:inline-block和vertical-align:middle，然后给孩子DIV那些相同的属性。由于vertical-align是沿着一条线对齐，那些内联 div 将被视为一条线。
Make the :beforediv height:100%, and the child div will automatically follow and align in the middle of a very tall "line."
制作:beforediv height:100%，子 div 将自动跟随并对齐在一条非常高的“线”的中间。
.parent:before, .child {
display:inline-block;
vertical-align:middle;
}
.parent:before {
content:""; // so that it shows up
height:100%; // so it takes up the full height
}
Here's a fiddleto demonstrate what I'm talking about. The child div can be any height, and you never have to modify its margins/paddings.
And here's a more explanatory fiddle.
这是一个小提琴来演示我在说什么。子 div 可以是任何高度，您永远不必修改其边距/填充。
而且这里有一个更强的解释小提琴。
If you're not fond of :before, you can always manually put in a div.
如果您不喜欢:before，您可以随时手动放入 div。
<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>
And then just reassign .parent:beforeto .parent .before
然后重新分配.parent:before给.parent .before
回答by anonymous coward
If you know the height, you can use absolute positioning with a negative margin-toplike so:
如果你知道高度，你可以使用绝对定位和负margin-top像这样：
#Login {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px; /* width / -2 */
margin-top:-200px; /* height / -2 */
}
Otherwise, there's no real way to vertically center a div with just CSS
否则，没有真正的方法可以仅使用 CSS 将 div 垂直居中
回答by Kamil Kot
In my firefox and chrome work this:
在我的 Firefox 和 chrome 中是这样工作的：
CSS:
CSS：
display: flex;
justify-content: center; // vertical align
align-items: center; // horizontal align
回答by BornToCode
@GáborNagy's comment on another postwas the simplest solution I could find and worked like a charm for me, since he brought a jsfiddle I'm copying it here with a small addition:
@GáborNagy 对另一篇文章的评论是我能找到的最简单的解决方案，对我来说就像一个魅力，因为他带来了一个 jsfiddle，我在这里复制了一个小补充：
CSS:
CSS：
#wrapper {
display: table;
height: 150px;
width: 800px;
border: 1px solid red;
}
#cell {
display: table-cell;
vertical-align: middle;
}
HTML:
HTML：
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>
If you wish to also align it horizontally you'd have to add another div "inner-cell" inside the "cell" div, and give it this style:
如果您还希望将其水平对齐，则必须在“单元格”div 内添加另一个 div“inner-cell”，并为其指定以下样式：
#inner-cell{
width: 250px;
display: block;
margin: 0 auto;
}
回答by testpattern
I found this site useful: http://www.vanseodesign.com/css/vertical-centering/This worked for me:
我发现这个网站很有用：http: //www.vanseodesign.com/css/vertical-centering/这对我有用：
HTML
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
CSS
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
回答by Harry Bosh
I needed to specify min-height
我需要指定最小高度
#login
display: flex
align-items: center
justify-content: center
min-height: 16em
回答by Barun
Vertically aligning has always been tricky.
垂直对齐一直很棘手。
Here I have covered up some method of vertically aligning a div.
在这里，我已经掩盖了一些垂直对齐 div 的方法。
HTML:
HTML：
<div style="display:flex;">
<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>
<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>
<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>
<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>
</div>
CSS:
CSS：
em{font-style: normal;font-weight: bold;}
.container {
width:200px;height:200px;background:#ccc;
margin: 5px; text-align: center;
}
.content{
width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}
