Html 制作视口的 div 中心 - 水平和垂直
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9622354/
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
Make a div center of viewport - Horizontally and vertically
提问by stecb
I have a <div id="wrapper">container in which my whole site content will be present. I have tried to make the div center vertically and horizontally by using css property like margin:0 auto; on #wrapper.
我有一个<div id="wrapper">容器，我的整个网站内容都将在其中显示。我试图通过使用像 .css 这样的 css 属性使 div 垂直和水平居中margin:0 auto; on #wrapper。
#wrapper
{
width:500px;
height:500px;
margin:0 auto;
background:#f7f7f7;
}
By using above css i can make the div in (top center) of screen but how to make it center(vertically). when i zoom out in firefox my div is going to zoom out in top center but what i want it should be always present in the center of screen from both vertically and horizontally.
通过使用上面的 css，我可以使 div 位于屏幕（顶部中心）中，但如何使其居中（垂直）。当我在 Firefox 中缩小时，我的 div 将在顶部中心缩小，但我希望它应该始终从垂直和水平方向出现在屏幕中心。
Can any one suggest me how can i get the layout like that.
任何人都可以建议我如何获得这样的布局。
Thanks in advance.
提前致谢。
回答by stecb
#wrapper
{
width:500px;
height:500px;
margin:0 auto;
background:#f7f7f7;
position:absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-250px;
}
Demo: http://jsfiddle.net/fJtNQ/
演示：http: //jsfiddle.net/fJtNQ/
Why is this working?
为什么这是有效的？
Well, basically you have an absolute positioned element inside the dom. It means that you can position it wherever you want and if you don't have a relative positioned element as parent, left and top will be the distance from the document's left/top origin.
好吧，基本上你在 dom 中有一个绝对定位的元素。这意味着您可以将它放置在您想要的任何位置，如果您没有相对定位的元素作为父元素，则 left 和 top 将是距文档左/上原点的距离。
Assigning left:50%and top:50%enables this element to be positioned always in the center of the screen, but in the center you will find the top left corner of the element.
分配left:50%并top:50%启用此元素始终位于屏幕的中心，但在中心，您将找到元素的左上角。
If you have fixed width/height, you can easily 'translate' the point in the center to be actually the center of the wrapper div by giving negative margin-leftand margin-top(therefore with the help of some extremely easy basic math their values will be -(width/2)and -(height/2))
如果你有固定的宽度/高度，你可以通过给出负数margin-left和margin-top（因此在一些非常简单的基本数学的帮助下，它们的值将是-(width/2)and -(height/2)）
EDIT
编辑
You can also easily center by using flexbox, plus (a big one) you don't need to specify w/h, i.e.:
您还可以使用flexbox, 加（一个大的）轻松居中，您不需要指定 w/h，即：
body { /* can also be whatever container */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#wrapper {
/* whatever style u want */
}
回答by musafar006
@stecb's answer works fine if you're working with fixed width/height.
如果您使用固定的宽度/高度，@stecb 的答案就可以正常工作。
To position a div or an image vertically at the center in all viewports and make it responsive, use this:
要将 div 或图像垂直放置在所有视口的中心并使其响应，请使用以下命令：
#elem-to-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I just replaced margin-left and margin-top with transform.
我只是用变换替换了 margin-left 和 margin-top 。
If you want a margin surrounding the element, use this:
如果您想要元素周围的边距，请使用：
#outer-elem {
width: 100%;
height: 100%;
padding: 30px;
background: #fafafa;
position: relative;
}
#elem-to-center {
width: calc(100% - 60px);
max-height: calc(100% - 60px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I found this useful even in responsive views.
我发现即使在响应式视图中这也很有用。
回答by rkrara
Here is a solution for those who need to center a child div relative to viewport and not "relative to parent div". Other solutions mentioned here do not work in this case as they tend to make the child div center relative to the parent div.
对于那些需要将子 div 相对于视口而不是“相对于父 div”居中的人来说，这是一个解决方案。此处提到的其他解决方案在这种情况下不起作用，因为它们倾向于使子 div 相对于父 div 居中。
<div id="container">
<div id="wrapper">Always center, No matter the parent div's position</div>
</div>
#wrapper {
width:300px;
height:300px;
margin:0 auto;
background:green;
position:fixed;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
}
#container {
display: block;
position: absolute;
width: 400px;
height: 400px;
border: 1px solid red;
bottom: 0;
left: 0;
}
回答by Hupperware
I use jQuery
我使用 jQuery
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
回答by chicagoing
Consider using display: tablecoupled with display: table-cell; vertical-align: middleon a separate element. Because CSS does not have semantic meaning, it's an acceptable solution.
考虑在单独的元素上使用display: table耦合display: table-cell; vertical-align: middle。因为 CSS 没有语义意义，所以它是一个可以接受的解决方案。
I worked up an example for you: http://dabblet.com/gist/2002681
我为你设计了一个例子：http: //dabblet.com/gist/2002681
The only downside is that requires a little more markup than some other solutions, but it contracts and expands with the content.
唯一的缺点是需要比其他一些解决方案更多的标记，但它会随着内容收缩和扩展。
回答by Rocks
The simplest and the cleanest way to do this would be by setting the height, margin (and width, if you want) using viewport sizes.
Say you want the heightof you container to occupy 60% (60vh) of the screen, you can divide the rest (40vh, since total height of the viewport = 100vh) equally between the top and the bottom margin so that the element aligns itself in the centre automatically.
Setting the margin-leftand margin-rightto auto, will make sure the container is centred horizontally.
最简单和最干净的方法是使用视口大小设置高度、边距（和宽度，如果需要）。
假设您希望height容器占据屏幕的 60% (60vh)，您可以将其余部分 (40vh，因为视口的总高度 = 100vh) 在顶部和底部边距之间平均分配，以便元素在自动居中。
将margin-left和设置margin-right为auto，将确保容器水平居中。
.container {
width: 60vw; /*optional*/
height: 60vh;
margin: 20vh auto;
background: #333;
}<div class="container">
</div>