使用css和html将div框居中，而不将文本放在框中

Question

我想在这里制作div盒子，但我不想将文本放在盒子中心，我似乎无法找到如何做到这一点。现在我拥有的是：

.box {
        text-align: left;
        background-color:#3F48CC;
        color:white;
        font-weight:bold;
        margin:120px auto;
        height:150px;
        display: inline-block;
        width: 200px;
    }

和

<div class=box>
    Login
    <form method ="post" action="addMember.php">
      <label for="name">Username:</label>
      <input name="name"/>
      <label for="password">Password:</label>
      <input name="password"/>
        <p>
        <input name="submit" type="Submit" value="Register"/>
        <input name="reset" type="reset" value="Clear Form">
  </form>
 </div>

提前致谢！

Answer 1

删除display: inline-block;＆amp; text-align:center

在为div定义inline-block时，

width/height不是必需的。

默认情况下，div是block元素。

.box {       
        background-color:#3F48CC;
        color:white;
        font-weight:bold;
        margin:120px auto;
        height:150px;        
        width: 200px;
    }

<强> DEMO

Answer 2

使用死点......

.box {
    text-align: left;
    background-color:#3F48CC;
    color:white;
    font-weight:bold;
    height:150px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -100px;
    margin-top: -75px;
}

注意：负边距正好是高度和宽度的一半，这会将元素拉回到完美的中心。仅适用于固定高度/宽度的元素。

更多信息：

• CSS Tricks Example
• jsFiddle Demo

Answer 3

jsFiddle DEMO

Alternate jsFiddle DEMO with Centered Form以及此CSS3 Version。

使表单看起来正确的关键是使用padding，这是盒子模型的一部分。这样做可以让你填写两边，并保持文本左手对齐。

HTML

<div class=box>Login
  <form method="post" action="addMember.php">
    <label for="name">Username:</label>
    <input name="name" />
    <label for="password">Password:</label>
    <input name="password" />
    <div class="buttons">
      <input name="submit" type="Submit" value="Register" />
      <input name="reset" type="reset" value="Clear Form" />
    </div>
  </form>
</div>

CSS：

.box {
  background-color:#3F48CC;
  color:white;
  font-weight:bold;
  height:150px;
  width: 150px;
  padding: 10px;
}

.buttons{
  padding-top: 20px;
}

<强>截图：