Question

我正在使用XHTML 1.0 Transitional doctype html文件，我希望有一个宽度为800px的主div，并使其显示为居中（不是div内容，而是div本身）。

我过去曾用过这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
            <!--
            html, body { margin:0; padding:0; }

            #main-container { background:black; width:800px; }
            -->
        </style>
    </head>
    <body>
        <center>
            <div id="main-container">
                Content
            </div>
        </center>
    </body>
</html>

但我不确定这是否是跨浏览器兼容的，或者是否是有效的xhtml。

Answer 1

自1998年以来，center标记已弃用。您需要在div上应用CSS margin 0 auto;。这会将上边距和下边距设置为0，左边距和右边距设置为auto，当width已知/固定时，div会自动“自动居中”。

另见：

Center a div in CSS, (text-align is not the answer)

Answer 2

删除center标记，并设置此css声明

#main-container { margin: auto; width:800px }

Answer 3

您可以使用

#container{
    position:relative;
    margin: auto;
}

或者，如果你有一个固定的容器宽度，让我们说800px你可以做类似的事情

#container{
    position:relative;
    left: -400px;
    margin-left: 50%;
}

Answer 4

使用margin: 0 auto;，如上所述：

<style type="text/css">
html, body {
  margin: 0;
  padding: 0;
}
#main-container {
  background: black;
  width: 800px;
  margin: 0 auto;
}
</style>

顺便说一句，如果您希望验证为正确的XHTML，则需要将type="text/css"添加到样式元素中。此外，几乎不需要从旧浏览器中隐藏CSS，因为现在几乎所有浏览器都支持CSS。

在xhtml中居中<div>的正确方法？</div>

4 个答案:

另见：