3

可能重复：
CSS在不同的屏幕中居中一个div

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

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

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

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

4

5 回答 5

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

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

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

margin: 0 auto;

这会将上边距和下边距设置为 0，将左右边距设置为自动。

于 2013-01-18T15:27:46.803 回答
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;
}
于 2013-01-18T15:27:18.747 回答
0

这只是 CSS 的一个技巧：

margin: 0 auto;

从监护人网站：

div.InSkinAlignCenter {
margin: 0 auto;
}

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

于 2013-01-18T15:29:28.883 回答
0

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/看看。

于 2013-01-18T15:30:46.733 回答
-1

试试这个：

CSS：

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

HTML：

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

另外，检查这个jsFiddle！

于 2013-01-18T15:28:29.207 回答