Html 水平和垂直居中 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14123999/
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 a DIV horizontally and vertically
提问by Nrc
Is there a way to CENTER A DIV vertically and horizontallybut, and that is important, that the content will not be cut when the window is smaller than the contentThe div must have a background color and a width and hight.
有没有办法垂直和水平地居中 DIV，但很重要的是，当窗口小于内容时，内容不会被剪切div 必须具有背景颜色和宽度和高度。
I have always centered divs with the absolute positioning and negative margins like in the example provided. But it has the problem that it cuts the content on top. Is there a method to center the div .content without this problem?
我总是像提供的示例中那样以绝对定位和负边距居中 div。但它有一个问题，它削减了顶部的内容。有没有一种方法可以在没有这个问题的情况下将 div .content 居中？
I have the example here to play: http://jsbin.com/iquviq/1/edit
我在这里播放示例：http: //jsbin.com/iquviq/1/edit
CSS:
CSS：
body { margin: 0px; }
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
}
/*
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?:
*/
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;/* half width*/
margin-top:-300px;/* half height*/
}
HTML:
HTML：
<div class="background">
<div class="content"> some text </div>
</div>
My question is not duplicate of "How to center an element horizontally and vertically? " 1- My question was asked before. (just check dates). 2- My question ask very clearly and in black as condition: "the content will not be cut when the window is smaller than the content"
我的问题不是“如何水平和垂直居中元素？” 1-我的问题之前被问过。（只需检查日期）。2-我的问题问得很清楚，黑色为条件：“当窗口小于内容时，内容不会被剪切”
回答by Nrc
After trying a lot of things I find a way that works. I share it here if it is useful to anyone. You can see it here working: http://jsbin.com/iquviq/30/edit
在尝试了很多事情之后，我找到了一种有效的方法。如果对任何人有用，我会在这里分享。你可以在这里看到它的工作：http: //jsbin.com/iquviq/30/edit
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute; /*it can be fixed too*/
left:0; right:0;
top:0; bottom:0;
margin:auto;
/*this to solve "the content will not be cut when the window is smaller than the content": */
max-width:100%;
max-height:100%;
overflow:auto;
}
回答by iamnotsam
For modern browsers
对于现代浏览器
When you have that luxury. There's flexbox too, but that's not broadly supported at the time of this writing.
当你有那种奢侈。也有 flexbox，但在撰写本文时还没有得到广泛支持。
HTML:
HTML：
<div class="content">This works with any content</div>
CSS:
CSS：
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Tinker with it further on Codepenor on JSBin
For older browser support, look elsewhere in this thread.
对于较旧的浏览器支持，请查看此线程中的其他地方。
回答by MultiformeIngegno
Here's a demo: http://www.w3.org/Style/Examples/007/center-example
这是一个演示：http: //www.w3.org/Style/Examples/007/center-example
A method(JSFiddle example)
一种方法（JSFiddle 示例）
CSS:
CSS：
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
HTML：
<div id="content">
Content goes here
</div>
Another method(JSFiddle example)
另一种方法（JSFiddle 示例）
CSS
CSS
body, html, #wrapper {
width: 100%;
height: 100%
}
#wrapper {
display: table
}
#main {
display: table-cell;
vertical-align: middle;
text-align:center
}
HTML
HTML
<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>
回答by suraj rawat
回答by clement g
You can compare different methods very well explained on this page: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
您可以在此页面上很好地比较不同的方法：http: //blog.themeforest.net/tutorials/vertical-centering-with-css/
The method they recommend is adding a empty floating element before the content you cant centered, and clearing it. It doesn't have the downside you mentioned.
他们推荐的方法是在您无法居中的内容之前添加一个空的浮动元素，然后将其清除。没有你说的缺点。
I forked your JSBin to apply it : http://jsbin.com/iquviq/7/edit
我分叉了你的 JSBin 来应用它：http: //jsbin.com/iquviq/7/edit
HTML
HTML
<div id="floater">
</div>
<div id="content">
Content here
</div>
CSS
CSS
#floater {
float: left;
height: 50%;
margin-bottom: -300px;
}
#content {
clear: both;
width: 200px;
height: 600px;
position: relative;
margin: auto;
}
回答by oomlaut
I do not believe there is a way to do this strictly with CSS. The reason is your "important"qualifier to the question: forcing the parent element to expand with the contents of its child.
我不相信有一种方法可以严格地使用 CSS 来做到这一点。原因是您对问题的“重要”限定符：强制父元素与其子元素的内容一起扩展。
My guess is that you will have to use some bits of JavaScript to find the height of the child, and make adjustments.
我的猜测是你将不得不使用一些 JavaScript 来找到孩子的身高，并进行调整。
So, with this HTML:
因此，使用此 HTML：
<div class="parentElement">
<div class="childElement">
...Some Contents...
</div>
</div>
This CSS:
这个CSS：
.parentElement {
position:relative;
width:960px;
}
.childElement {
position:absolute;
top:50%;
left:50%;
}
This jQuery might be useful:
这个 jQuery 可能有用：
$('.childElement').each(function(){
// determine the real dimensions of the element: http://api.jquery.com/outerWidth/
var x = $(this).outerWidth();
var y = $(this).outerHeight();
// adjust parent dimensions to fit child
if($(this).parent().height() < y) {
$(this).parent().css({height: y + 'px'});
}
// offset the child element using negative margins to "center" in both axes
$(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});
Remember to load the jQ properly, either in the body below the affected elements, or in the head inside of $(document).ready(...).
请记住正确加载 jQ，无论是在受影响元素下方的主体中，还是在$(document).ready(...).
回答by Yann
You want to set style
您要设置样式
margin: auto;
And remove the positioning styles (top, left, position)
并删除定位样式（顶部，左侧，位置）
I know this will center horrizontaly but I'm not sure about vertical!
我知道这会水平居中，但我不确定垂直！
