Question

我有一个需要在另一个div内水平居中的div。问题是内部div 几乎居中 - 即，它居中但是左边距/填充（我无法确定哪个）约为5-10px。如何使内部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;

Answer 4

你可以这样做

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

.inner {
    position:relative;
    display: inline-block;
    padding:10px;
    width:200px;
    height:200px;
}

Answer 5

这段代码怎么样？

.inner {
position:relative;
padding:10px;
width:200px;
height:200px;
/* included */
left:50%;
margin-left:-100px;}

麻烦将div放在另一个div中

5 个答案: