如何将容器居中放置在屏幕中央？

Question

如何将容器居中放置在屏幕中央？

htmlcss

3

可能重复：
如何在不同屏幕上居中一个div元素我认为这个问题的答案非常简单，但我却陷入了困境。

我正在尝试将一个网站定位在屏幕中央，就像《卫报》的网站一样 - http://www.guardian.co.uk/。我假设使用左右边框是正确的方法，但是这使得定位页脚变得困难。

看了看《卫报》网站，并使用火狐浏览器检查元素功能，发现他们完全没有在屏幕左右使用任何div元素。实际上，它们容器似乎就在屏幕中央。

那么我的问题就是：您如何定位一个容器？

- Hector

5个回答

3

一个快速的方法是：

#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;
}

- Zeal

2

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/ check it out.

- 0x_Anakin

0

这只是一个 CSS 技巧：

margin: 0 auto;

来自 The Guardian 网站：

div.InSkinAlignCenter {
margin: 0 auto;
}

据我所记，position属性应该设置为relative。

- David Diez

-1

试试这个：

CSS：

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

HTML：

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

另外，也可以看看这个jsFiddle！

- Amberlamps

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joseph Silber · Accepted Answer

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

这里是代码片段：http://jsfiddle.net/d9yBs/

你也可以将两个margin属性合并，使用简写方式：

margin: 0 auto;

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