首先:你需要给第二 Div 一个宽度:

例如:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

 #inner{
     width: 50%;
     margin: auto;
}

请注意,如果你不给它一个宽度,它将采取整个线的宽度。

另一个解决方案,而无需为其中一个元素设置宽度,是使用CSS 3转换属性。

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

技巧是,翻译X(-50%)将#内部元素置于其自己的宽度的左侧50%。

這裡有一個顯示水平和垂直調整的Fiddle。

更多信息可在Mozilla Developer Network上找到。

集中一个未知的高度和宽度的DIV

它与合理的现代浏览器(Firefox,Safari/WebKit,Chrome,Internet & Explorer & 10,Opera等)工作。

.content { 位置: 绝对; 左: 50%; 顶: 50%; 转换: 翻译(-50%, -50%); } <div class="content"> 这与任何内容工作</div>

在 Codepen 或 JSBin 上加入它。

试试这:

<div style="position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);"><div>Example</div></div>

您可以使用显示器: flex 为您的外部 div 和到水平中心 您必须添加 justify 内容: 中心

#outer{
    display: flex;
    justify-content: center;
}

或者您可以参观w3schools - CSS flex Property 更多想法。

您可以使用 Flexbox 如下:

#outer { 显示: flex; justify-content: center } <div id="outer"> <div id="inner"> Foo foo</div> </div>

适用于所有浏览器支持的 Autoprefixer:

#outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

或其他

使用转换:

#inner { 位置:绝对; 左: 50%; transform:翻译(-50%) } <div id="outer"> <div id="inner"> Foo foo</div> </div>

使用 Autoprefixer:

#inner {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform:     translate(-50%);
    transform:         translate(-50%)
}