你可以通过添加下面提到的css样式来做到这一点。大多数浏览器都支持这一点。您可以在这里查看浏览器支持。愿一切都好！如有任何疑问，请评论

# outerDiv { 宽度:500 px; 身高:500 px; 位置:相对; 背景:灰色; 显示:flex; justify-content:中心; 对齐项目:中心; ｝ # innerDiv { 背景:青色; 宽度:284 px; 身高:290 px; ｝ < div id = " outerDiv " > < div id = " innerDiv " > 内心的Div < / div > < / div >

如果你在看完上面给出的精彩答案后仍然不明白。

这里有两个简单的例子，告诉你如何实现它。

使用显示:表格单元格

.wrapper { 显示:表格单元; vertical-align:中间; text-align:中心; 宽度:400 px; 身高:300 px; 边框:1px实体#555; ｝ .container { 显示:inline-block; text-align:左; 填充:20 px; 边框:1px solid #cd0000; ｝ < div class = "包装" > < div class = "容器" > 使用"<strong>display: table-cell</strong>"将div居中对齐 < / div > < / div >

使用flex-box(显示:flex)

.wrapper { 显示:flex; justify-content:中心; 宽度:400 px; 身高:300 px; 边框:1px实体#555; ｝ .container { align-self:中心; 填充:20 px; 边框:1px solid #cd0000; ｝ < div class = "包装" > < div class = "容器" > 使用"<strong>display: flex</strong>"将div居中 < / div > < / div >

注意:在使用上述实现之前，请检查display: table-cell和flex的浏览器兼容性。

使居中:使垂直和水平对齐:

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}

你可以用一个简单的javascript (jQuery)块来做到这一点。

CSS:

#outerDiv{
    height:100%;
}

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>

博士tl;

垂直对齐middle可以，但是你必须在父元素上使用table-cell，在子元素上使用inline-block。

这个解决方案在IE6和ie7中不起作用。你的方法比较安全。但既然你用CSS3和HTML5标记了你的问题，我想你不介意使用现代解决方案。

经典的解决方案(表格布局)

这是我最初的答案。它仍然可以正常工作，并且是得到最广泛支持的解决方案。表格布局会影响你的渲染性能，所以我建议你使用一种更现代的解决方案。

这里有一个例子

测试:

FF3 + 5。 FF4 +。 Safari 5 + Chrome 11 +。 IE9 +。

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

现代解决方案(转换)

由于转换得到了很好的支持，现在有一种更简单的方法来实现它。

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

演示

♥我最喜欢的现代解决方案(flexbox)

我开始越来越多地使用flexbox，它现在也得到了很好的支持，这是迄今为止最简单的方法。

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

更多的例子和可能性: 比较一个页面上的所有方法

在父元素上显示文本对齐中心，在子元素上显示内联块。这将居中所有的东西。我相信这叫做“块浮动”。

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

这也是一个很好的选择浮动，祝你好运!