在另一个div中对div进行中心化的问题

Question

我有一个div，需要在另一个div内水平地居中。问题是，内部div几乎是居中的，也就是说，它是居中的，但是有一个左边距/填充(我无法确定哪一个)在5-10 it左右。如何使内部div以外部div为中心？

HTML：

<div class="outer">
    <div class="inner">
        // stuff
    </div>
</div>

CSS：

.outer {
    position:relative;
    display:inline-block;
    width:100%;
}

.inner {
    position:relative;
    padding:10px;
    width:200px;
    height:200px;
}

Answer 1

你可以这样做：

#parent {
  display: table-cell;
  width: 300px;
  height: 300px;
  vertical-align: middle;
  text-align: center;
    border: 1px solid black;
}

#child {
    display: inline-block;
    width:100px;
    height: 100px;
    border: 1px solid black;
}

这里有一个小提琴：http://jsfiddle.net/De36Y/

Answer 2

我会尝试使内部div有一个立场:绝对，然后设置保证金，如下所示：

CSS：

.outer {
    position:relative;
    display:inline-block;
    width:100%;
}

.inner {
    position: absolute;
    margin-left: auto;
    margin-right: auto
    width:200px;
    height:200px;
}

Answer 3

关于.inner的使用：

width: 50%; margin: 0 auto;