试图在具有显示表单元格的 div 中居中 div

Question

在我的网站上，我设置了一个要显示的 div：table。在另一个带有 display: table-row 的 div 里面。在设置为显示的 2 个 div 中：table-cell。在第一个（左）表格单元格 div 上，我试图将 div 居中。 div 居中的唯一方法是，如果我在其上方放置一个 div，其内容足以填满整个 div。

这是我的 HTML（有很多难看的不间断空格）：

<section class="main-content">
<div class="row">
<section class="cell leftSide">
<section class="mainWrap">
<div class="clear-fix"></div>
<div class="paddingWrap">
    <div class="widthFiller">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div class="sitemap">
        <hgroup class="title">
            <h1>@Html.MvcSiteMap().SiteMapTitle()</h1>
        </hgroup>
        @Html.MvcSiteMap().SiteMap()
    </div>
    </div>
    </section>
    </section>
    </div>

还有我的相关 CSS：

.main-content {
    display: table;
    width: 100%;
}
.main-content .row {
    display: table-row;
}
.main-content .cell {
    display: table-cell;
    vertical-align: top;
}
section.mainWrap {
    display: table-cell;
    font-size: 1.2em;
    margin-top: -34px;
}
.paddingWrap {
    padding: 15px 70px;
}
.mainWrap .sitemap {
    border: 2px solid #aaaaaa;
    display: table;
    margin: 20px auto;
    padding: 10px;
    text-align: center;
}

我需要将站点地图 div 置于 mainWrap 表格单元格的中心。如果我删除带有所有空格的“widthFiller”div，则站点地图 div 会回到左侧。 这是我的实时页面，您可以查看问题：http://clubschoicefundraising.com/about/site-map

Answer 1

我相信有一个 display:table-cell 您需要在表格中使用它。 所以在 div "mainWrap" 周围放置另一个 div，其样式为 display:table 和 width:100%

所以：

<div class="mainWrapWrapper" style="display:table;width:100%">
 </div class="mainWrap">
  .....
 <div>
</div>

目前的问题是 mainWrap 不会遵守任何宽度 css，因为它不在表格 div 内，并且当您检查它的宽度时，它不是 100%，因此站点地图上的 margin:0px auto 不会做任何事情

编辑：另外，您可以删除宽度填充