Question

我想在CSS中居中Div元素。我尝试过所有我发现的东西。似乎什么都没有用？我用W3C的验证器检查了我的CSS。没有错误。我很无能为力。这是我最近的尝试。

body {
   background: url(loginbg.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

input[type="text"], input[type="password"] {
    float: left; 
    width: 230px; 
    padding: 15px 5px 5px 5px; 
    margin-top: 5px; 
    margin-left: 3px; 
    border: 1px solid #999999;  
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    border-radius: 5px;     
}


#submit_img, #sumbit_button {
   cursor: pointer;
   margin:0 auto;
}

#loginarea {
   margin:0 auto;
}

mY HTMl代码：

<head>
<link rel="stylesheet" type"text/css" href="login.css">
<title>
Login
</title>
</head>
<body>
<div id="loginarea" class="loginarea">
<div id="username_box">
<input type="text" id="username" value="Username">
</div> <div id="password_box">
<br><br><br><br>
<input type="password" id="password" value="Password">
</div>
    <br><br><bR>
    <button id="sumbit_button" style="border: 0; background: transparent;">
        <img src="loginbutton.png" width="150" height: "50" id="sumbit_img">
     </button>
    <br>
 </div>
<div id="footer" class="footer">
    Copyright 2013 company name| CraftManager 1.2 | Credits
    </div>
</body>
</html>

页脚是否阻挡了居中？

现状：

我在div上设置了一个宽度，＆＃34;居中＆＃34;利润率。它有所作为，尽管它并不是真正的中心。

Answer 1

默认情况下，<div>元素填充父元素宽度的100％。如果你想让它居中，那么你要做的第一件事就是让它低于100％宽。

因此在div上设置宽度，200px或其他，然后您可以设置margin-left: auto;和margin-right: auto;

#loginarea {
  width: 200px;
  margin: 0 auto; /* top/bottom: 0 margin. left/right: auto margin */
}

http://jsfiddle.net/LzgpW/

Answer 2

我以前做过这个，代码不方便所以我用Google搜索了。 http://www.dzone.com/snippets/dead-centre-div可能有帮助。

我不知道为什么它不会让你这样做，从左边用css 50％，从顶部做50％。

您是否有兴趣将其垂直和水平居中？

这就是我感兴趣的东西，我自己的成绩和成功率甚至取决于div的大小。

Answer 3

尝试设置

   margin-left: auto ;
   margin-right: auto ;

有关详情，请查看here

Answer 4

auto页边距仅在中心元素具有“已知”大小时才有效。因此，如果您希望#loginarea居中，则需要为其指定宽度：

#loginarea {
    width:30em; /* can be any relative or fixed size, like 200px or 30% */
    margin: 0 auto;
}

示例： jsFiddle：http://jsfiddle.net/XBCVc/1/

Answer 5

看起来loginarea div没有关闭。请仔细检查一下。

在CSS中居中DIV元素

5 个答案: