CSS 如何为所有浏览器垂直居中 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/396145/
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 a div for all browsers?
提问by Burak Erdem
I want to center a divvertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.
我想div用 CSS 垂直居中。我不需要表格或 JavaScript，只需要纯 CSS。我找到了一些解决方案，但它们都缺少 Internet Explorer 6 支持。
<body>
<div>Div to be aligned vertically</div>
</body>
How can I center a divvertically in all major browsers, including Internet Explorer 6?
如何div在所有主要浏览器（包括 Internet Explorer 6）中垂直居中？
回答by Billbad
Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible heightcontent box. It was tested and working for recent versions of Firefox, Opera, Chrome, and Safari.
下面是我可以构建的最好的全方位解决方案，以垂直和水平居中固定宽度、灵活高度的内容框。它已经过测试并适用于最新版本的 Firefox、Opera、Chrome 和 Safari。
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>View A Working Example With Dynamic Content
I built in some dynamic content to test the flexibility and would love to know if anyone sees any problems with it. It should work well for centered overlays also -- lightbox, pop-up, etc.
我内置了一些动态内容来测试灵活性，并且很想知道是否有人发现它有任何问题。它也适用于居中的叠加层——灯箱、弹出窗口等。
回答by Yisela
One more I can't see on the list:
还有一个我在列表中看不到的：
.Center-Container {
position: relative;
height: 100%;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: solid black;
}
- Cross-browser (including Internet Explorer 8 - Internet Explorer 10 without hacks!)
- Responsive with percentages and min-/max-
- Centered regardless of padding (without box-sizing!)
heightmust be declared (see Variable Height)- Recommended setting
overflow: autoto prevent content spillover (see Overflow)
- 跨浏览器（包括 Internet Explorer 8 - Internet Explorer 10，无需破解！）
- 响应百分比和最小/最大-
- 无论填充如何都居中（没有盒子大小！）
height必须声明（见Variable Height）overflow: auto防止内容溢出的推荐设置（请参阅溢出）
回答by DrupalFever
The simplest way would be the following 3 linesof CSS:
最简单的方法是以下3 行CSS：
1) position: relative;
1）位置：相对；
2) top: 50%;
2) 顶部：50%；
3) transform: translateY(-50%);
3) 变换：translateY(-50%);
Following is an EXAMPLE:
以下是一个例子：
div.outer-div {
height: 170px;
width: 300px;
background-color: lightgray;
}
div.middle-div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}<div class='outer-div'>
<div class='middle-div'>
Test text
</div>
</div>回答by DrupalFever
Actually you need two div's for vertical centering. The div containing the content must have a width and height.
实际上你需要两个 div 来垂直居中。包含内容的 div 必须具有宽度和高度。
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* half of #content height*/
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>Here is the result
这是结果
回答by Santosh Khalse
Now the flexbox solution is a very easy way for modern browsers, so I recommend this for you:
现在 flexbox 解决方案对于现代浏览器来说是一种非常简单的方法，所以我向你推荐这个：
.container{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background:green;
}
body, html{
height:100%;
}<div class="container">
<div>Div to be aligned vertically</div>
</div>回答by Armel Larcier
Edit 2020 : only use this if you need to support old browsers like IE8 (which you should refuse to do ). If not, use flexbox.
编辑 2020：仅当您需要支持 IE8 等旧浏览器时才使用此功能（您应该拒绝这样做）。如果没有，请使用 flexbox。
This is the simplest method I found and I use it all the time (jsFiddle demo here)
这是我找到的最简单的方法，我一直在使用它（这里是 jsFiddle 演示）
Thank Chris Coyier from CSS Tricks for this article.
感谢 CSS Tricks 的 Chris Coyier撰写本文。
html, body{
height: 100%;
margin: 0;
}
.v-wrap{
height: 100%;
white-space: nowrap;
text-align: center;
}
.v-wrap:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
/* adjust for white space between pseudo element and next sibling */
margin-right: -.25em;
/* stretch line height */
height: 100%;
}
.v-box{
display: inline-block;
vertical-align: middle;
white-space: normal;
}<div class="v-wrap">
<article class="v-box">
<p>This is how I've been doing it for some time</p>
</article>
</div>Support starts with IE8.
支持从 IE8 开始。
回答by ymakux
After a lot of research I finally found the ultimate solution. It works even for floated elements. View Source
经过大量的研究，我终于找到了最终的解决方案。它甚至适用于浮动元素。查看源代码
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
回答by Reggie Pinkham
Flexbox solution
弹性盒解决方案
html, body { margin: 0; height: 100%; }
body {
display: flex;
align-items: center;
}<div>This is centered vertically</div>回答by Nerdroid
To center the div on a page, check the fiddle link.
要在页面上居中 div，请检查小提琴链接。
#vh {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}<div id="vh" class="box">Div to be aligned vertically</div>Another option is to use flex box, check the fiddle link.
另一种选择是使用弹性框，检查小提琴链接。
.vh {
background-color: #ddd;
height: 400px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}<div class="vh">
<div>Div to be aligned vertically</div>
</div>Another option is to use a CSS 3 transform:
另一种选择是使用 CSS 3 转换：
#vh {
position: absolute;
top: 50%;
left: 50%;
/*transform: translateX(-50%) translateY(-50%);*/
transform: translate(-50%, -50%);
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}<div id="vh" class="box">Div to be aligned vertically</div>回答by Varsha Dhadge
The easiest solution is below:
最简单的解决方案如下：
.outer-div{
width: 100%;
height: 200px;
display: flex;
border:1px solid #000;
}
.inner-div{
margin: auto;
text-align:center;
border:1px solid red;
}<div class="outer-div">
<div class="inner-div">
Hey there!
</div>
</div>