在多个嵌套 div 中居中 div 内容答案

【问题标题】：Centering div content within multiple nested divs在多个嵌套 div 中居中 div 内容
【发布时间】：2014-08-16 07:46:10
【问题描述】：

我试图将一些居中，以便它们显示在中心内，但棘手的部分是 html 在多个（html 的一部分是静态的，而它的一部分是来自数据库的动态）。

查看屏幕截图作为其当前外观的示例（我希望此内容位于中心） http://postimg.org/image/5fc6ecgy7/

注意 - 该站点使用的是基本 960 网格系统以下是 HTML：

<div class="">
<div class="">
    <div class="">
        <div id="national-prize-feed" class="panel-wrapper ">
            <div class="border">
            <div class="content clearfix add-radius">
            <div style="padding:10px 0px;">
            <div id="nation-prizes-collection" class="clearfix">
            <div class="summary"></div>
            <div class="">
                <div class="national-prizes">
                <div class="prizes">
                    <a href="ipod-shuffle"><img class="prizes-img" alt="iPod Shuffle" src="/images/prizes/ipod-shuffle.png"></a>
                </div>
                </div>
                <div class="national-prizes">
                <div class="prizes">
                    <a href="football"><img class="prizes-img" alt="Football" src="/images/prizes/football.png"></a>
                </div>
                </div>
            </div>
            <div class="keys" title="/pages/index/slug/prizes" style="display:none">
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>

我的特定 css（还有很多……它基于基于网格的布局）

div.prizes {
  float: left;
}

div.prizes img {
  width: 280px;
}

.prizes-img {
  padding: 0 7px 0 7px;
  margin: 7px 5px 7px 5px;
  max-width: 100%;
  height: auto;
}

【问题讨论】：

标签： html css css-position centering grid-layout

【解决方案1】：

为了将一个DIV定位到屏幕的中心，你需要设置一个div的静态宽度居中，左：0px，右：0px，并且各自的边距为自动。

这里是一个例子：http://jsfiddle.net/pR4hq/

<style>.center{
    position: relative;
    display: block;
    width: 120px;
    background: rgb(90,90,90);
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}</style>
<div class="center">Center Content</div>

【讨论】：