Question

我开始编写我的第一个网站，并尝试使用网上找到的各种方法将容器ID集中在CSS中（最常见的是margin-left：auto; margin-right：auto;）但它只是赢了＆＃39;工作，我不知道为什么，或者我能做些什么（我知道，我可以在html文件中创建一个包含三列的表，但我不想混合和匹配表和divs）

到目前为止我的代码看起来像这样：

HTML：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>

<div id="content">
hello world!
</div>

</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

body {
background-color:#FFF; 
}

#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto; 
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}

Answer 1

解决方案＃1：

将position: absolute;替换为position: relative;（CSS）中的#content。

JSFiddle - DEMO和Full Screen View

＆＃13;

body, html {
    background-color:#FFF;
    height:100%;
}
#content {
    width:980px;
    height: 100%;
    background-color:#FCC;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    bottom:0px;
    text-align:center;
}

＆＃13;

<div id="content">hello world!</div>

＆＃13;

有关margin: 0 auto;工作中心的更多信息：

<强> What, exactly, is needed for margin: 0 auto; to work?

解决方案＃2：

将left: 50%;和margin-left: -490px;（#content div的一半宽度）添加到#content

JSFiddle - DEMO和Full Screen View

#content {
    width: 980px;
    background-color: #FCC;
    position: absolute;
    display: block;
    top: 0px;
    bottom: 0px;
    margin-left: -490px;
    left: 50%;
    text-align: center;
}

Answer 2

容器位于中心，如果需要，您需要在中心对齐文本，

align:center

应该是

text-align:center;

Demo

Answer 3

您是否试图将“Hello world”文本居中？如果添加

text-align: center;

而不是

align:center;

Answer 4

据我所知，你不能在position: absolute;上放置一些东西。 position: absolute;意味着div对某些东西有绝对的定位。

如果你想将它居中，那么你可以将容器包裹在div中，并在其上放置position: relative;，然后将其放在中心位置。

像这样：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>

<div id="wrapper">
  <div id="content">
  hello world!
  </div>
</div>

</body>
</html>

使用这个CSS：

@charset "utf-8";
/* CSS Document */

body {
background-color:#FFF; 
}

#wrapper {
position: relative; /* Needs to be there, for the #content-container to know, 
what it's relative to. */
width: 100px; /* Needed as well */
display: block; /* For older browsers */
overflow: hidden; /* For older browsers */
margin: 0 auto 0; /* Adds the margin that centers it. */    
}

#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto; 
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}

另一种方法是从代码中替换它：

position: absolute;
top: 0px;
bottom:0px;

有了这个：

position: relative;

然后你的代码应该也能正常工作......

为什么要将position: absolute;放在中心位置？也许你想要实现某些目标，还有另一种做法......

CSS容器不会居中

4 个答案:

解决方案＃1：

解决方案＃2：

Demo