【问题标题】：center aligned div isnt actually center居中对齐 div 实际上不是居中
【发布时间】：2011-07-14 13:33:51
【问题描述】：

好的，我有一个 div 嵌套在另一个 div 中，内部 div 以 80% 的宽度居中。但它没有完全居中。

如何让它完全居中？

html

<div class="wrap">
  <div class="content">
    <h1>Contact</h1>
    <form action="/cgi-bin/cgiemail" method="post">
      <table width="50%" border="0" cellpadding="5" align="center">
        <tr>
          <td align="left" width="50%">First Name</td>
          <td><input name="FirstName" type="text" id="fname" size="25" /></td>
        </tr>
      </table>
    </form>
  </div>
</div>

css

.wrap {
    overflow:hidden;
    width:100%;
    height:100%;
    position:absolute;
}
.content {
    width:80%;
    margin:20px auto;
    padding:15px;
    background:url(../images/contentback.png);
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
}

【问题讨论】：

你试过做一个jsfiddle吗？看起来这会让人们很容易帮助你。
对不起，请稍等一下
我试图避免使用 jsfiddle，因为 html 嵌套了很多次
为它做了一个小提琴：jsfiddle.net/drC9C
@gar_onn 我在 Chrome 中没有发现任何问题。

标签： css center fluid-layout

【解决方案1】：

css 中的这条填充线导致框偏离中心。

/* stop do not edit */
#contact>div {
    padding:50px 20px;
}

摆脱该行的左/右页边距（即使评论告诉我不要）为我修复了它。

http://jsfiddle.net/4AX5b/

【讨论】：

嗯，好的，谢谢，我没想到会是这样。大声笑停止不编辑只是为了主要布局，它并不意味着你不编辑它。

【解决方案2】：

添加到您的 CSS：

body, 
html {
    padding: 0;
    margin: 0;
}

Demo fiddle.

【讨论】：

还是什么都没有，我真的不知道为什么要这样做。

【解决方案3】：

找到了：

/* stop do not edit */
#contact>div {
    pading: 50px 20px;
}

导致错误应该是：

#contact > div {
padding: 50px 0;
}

【讨论】：