Html 如何在屏幕中间放置一个容器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14402038/
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 position a container in the middle of the screen?
提问by Hector
Possible Duplicate:
CSS Centering a div in different Screens
可能的重复：
CSS 在不同屏幕中居中一个 div
I presume the answer to this question is really simple but i am stumped.
我认为这个问题的答案很简单，但我很难过。
I am trying to get a website positioned in the center of the screen like the Guardian website - http://www.guardian.co.uk/. I assumed i was right to use a left and right border, however this has made positioning the footer difficult.
我试图让一个网站像卫报网站一样位于屏幕中央 - http://www.guardian.co.uk/。我认为我使用左右边框是正确的，但是这使得定位页脚变得困难。
Having looked at the guardian website and using the firefox inspect element capability it appears they are using no divs on the left and right of the screen whatsoever. In fact there container appears to just be in the middle of the screen.
查看了 Guardian 网站并使用了 firefox 检查元素功能，看来他们在屏幕的左侧和右侧都没有使用 div。事实上，容器似乎只是在屏幕的中间。
So i suppose my question is. How do you position a container like so?
所以我想我的问题是。你如何定位这样的容器？
回答by Joseph Silber
.container {
/* remember to set a width */
margin-right: auto;
margin-left: auto;
}
Here's the fiddle: http://jsfiddle.net/d9yBs/
这是小提琴：http: //jsfiddle.net/d9yBs/
You can also combine to 2 margin properties, and use the shorthand:
您还可以组合到 2 个边距属性，并使用简写：
margin: 0 auto;
This'll set the top & bottom margin to 0, and the left & right to auto.
这会将顶部和底部边距设置为 0，将左右边距设置为自动。
回答by Zeal
quick way is:
快速的方法是：
#container
{
position: absolute;
left: 50%;
top: 50%;
height: 200px;
margin-top: -100px /* half of you height */
width: 400px;
margin-left: -200px /* half of you width */
}
another way for only centering only is
另一种仅居中的方法是
#container
{
width: 400px;
margin-left: auto;
margin-right: auto;
}
回答by David Diez
It's just a trick with CSS:
这只是 CSS 的一个技巧：
margin: 0 auto;
margin: 0 auto;
From the guardian site:
来自监护人网站：
div.InSkinAlignCenter {
margin: 0 auto;
}
As far as I remember positionproperty should be set to relative
据我记得position属性应该设置为relative
回答by syd619
HTML
HTML
<body>
<div class="page_wrap">
</div>
</body>
CSS
CSS
.page_wrap
{
border: 1px solid black;
width: 250px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
body
{
text-align: center; /* required by some browsers */
}
http://jsfiddle.net/pc7AY/check it out.
