Question

我试图将一个框元素置于另一个元素的中心。我能够做到这一点。但是，我想将两个元素放在页面的中心，而不必使用显式的margin-left，margin-right值...而且它不起作用。这就是我所拥有的：

    .Outer
    {            
        width: 1000px;
        height: 1000px;
        background-color: red;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        position: relative;
    }

    .Inner 
    {
        background-color: blue;
        width: 500px;
        height: 500px;
        display: inline-block;     
    }

出于某种原因，当我尝试将外框设置为具有边距时：0自动使其居中，同时设置display: table-cell，整个框移动到左侧。那不是我想要的。我尝试float Outer然后clear: both，但我只能将其放在body元素的中心。我在这里缺少什么？是唯一通过设置＆＃34;某些价值来实现这一目标的。明确地显示顶部，左侧，右侧和边距，而我在元素上使用table-cell？

Answer 1

试试这个：http://jsfiddle.net/5sLsm08v/

基本上，只需设置

即可

display: block;
margin: 0 auto;

以块为中心。

显示＆＃34; table-cell＆＃34;不能使用margin 0 auto;

出于测试目的，我使用较小尺寸的div（100x50而不是1000x500）。

如果你不想让div垂直居中，只需删除＆＃34; vertical-align＆＃34; ：）

Answer 2

嗨，这会解决这个问题，我知道你说没有边距，但即使你在设置左边50％时调整页面大小，这也不会影响任何内容

.Outer {            
   width: 1000px;
   position: absolute;
   left: 50%;
   margin-left: -500px; /* HALF THE WIDTH OF THE ELEMENT YOU ARE CENTRING */
}

在没有显式边距值的页面上居中嵌套Div

2 个答案: