Question

可能重复：
CSS Centering a div in different Screens

我认为这个问题的答案很简单，但我很难过。

我正在尝试将网站放在屏幕中央，例如Guardian网站 - http://www.guardian.co.uk/。我认为我使用左右边框是正确的，但这使得页脚的位置变得困难。

在查看监护人网站并使用firefox检查元素功能后，看起来他们在屏幕的左右两侧都没有使用div。事实上，容器似乎只是在屏幕的中间。

所以我想我的问题是。你如何定位这样的容器？

Answer 1

.container {
    /* remember to set a width */
    margin-right: auto;
    margin-left: auto;
}

这是小提琴：http://jsfiddle.net/d9yBs/

您还可以合并为2个边距属性，并使用简写：

margin: 0 auto;

这将设置顶部＆amp;下边距为0，左边和下边距为自动权。

Answer 2

快速的方法是：

#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 */
}

仅以中心为中心的另一种方式是

#container
{
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}

Answer 3

我认为这就是你想要的。 链接： http://codepen.io/anon/pen/Ihzxp

关注此https://stackoverflow.com/a/14401391/1278540

Answer 4

这只是CSS的一个技巧：

margin: 0 auto;

来自监护人网站：

div.InSkinAlignCenter {
margin: 0 auto;
}

据我记得position属性应设置为relative

Answer 5

HTML

<body>
  <div class="page_wrap">
  </div>
</body>

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/检查一下。

Answer 6

试试这个：

CSS：

.page {
    width: 200px;
    background: #FF0000;
    margin: auto;
}

HTML：

<div class="page">
    This is the content.
</div>

另外，请检查此jsFiddle！

如何在屏幕中间放置一个容器？

6 个答案: