position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

解释:

给它一个绝对定位(父元素应该有相对定位)。然后，左上角被移动到中心。因为你还不知道宽度/高度，所以你使用css transform来转换相对于中间的位置。平移(-50%，-50%)会将左上角的x和y位置降低50%的宽度和高度。

利用Flex显示的简单解决方案

 <div style = 'display:flex; position:absolute; top:0; bottom:0; right:0; left:0; '>
      <div id = 'div_you_want_centered' style = 'margin:auto;'> 
           This will be Centered 
      </div>
 </div>

查看http://css-tricks.com/snippets/css/a-guide-to-flexbox/

第一个div占据了整个屏幕，并有一个针对每种浏览器的显示:flex集。第二个div(居中div)充分利用了显示:flex div，其中margin:auto工作出色。

注意兼容IE11+。(IE10 w/ prefix)。

我知道我迟到了，但是这里有一种方法可以将一个维度未知的div集中在一个维度未知的父元素中。

风格:

<style>

    .table {
      display: table;
      height: 100%;
      margin: 0 auto;
    }
    .table-cell {
      display: table-cell;
      vertical-align: middle;      
    }
    .centered {
      background-color: red;
    }
  </style>

HTML:

<div class="table">
    <div class="table-cell"><div class="centered">centered</div></div>
</div>

演示:

看看这个演示。

如果你正在研究新的浏览器(IE10+)，

然后你可以使用transform属性在中心对齐一个div。

<div class="center-block">this is any div</div>

这个的css应该是:

.center-block {
  top:50%;
  left: 50%;
  transform: translate3d(-50%,-50%, 0);
  position: absolute;
}

这里的问题是，您甚至不必指定div的高度和宽度，因为它会自行处理。

同样，如果你想把一个div放在另一个div的中心，那么你可以指定外部div的相对位置，然后这个CSS开始为你的div工作。

工作原理:

当您将left和top指定为50%时，div将位于页面的右下四分之一，其左上端固定在页面的中心。 这是因为，左/顶部属性(当以%给出时)是基于外部div(在您的情况下，窗口)的高度计算的。

但是transform使用元素的高度/宽度来决定转换，因此div将向左移动(50%宽度)和向上移动(50%高度)，因为它们是以负号给出的，因此将其对齐到页面的中心。

如果你必须支持旧的浏览器(抱歉，包括IE9)，那么表格单元格是最流行的方法。

使用Flex-box在我看来:

#{母公司 显示:flex; justify-content:中心; 对齐项目:中心; ｝ < div id = "父" > <div id="child">Hello World!< / div > < / div >

您可以看到，只有三个CSS属性可以用于将子元素垂直和水平居中。显示:flex;通过激活Flex-box display来完成主要部分，justify-content: center;将子元素垂直居中并对齐-items: Center;水平居中。为了看到最好的结果，我只添加了一些额外的样式:

#{母公司 显示:flex; justify-content:中心; 对齐项目:中心; 身高:500 px; 宽度:500 px; 背景:黄色; ｝ #孩子{ 宽度:100 px; 身高:100 px; 背景:银色; ｝ < div id = "父" > <div id="child">Hello World!< / div > < / div >

如果你想了解更多关于Flex-box的知识，你可以访问W3Schools, MDN或CSS-Tricks获取更多信息。

实际上有一个解决方案，使用css3，它可以垂直居中一个未知高度的div。诀窍是将div向下移动50%，然后使用transformmy将其移回中间。唯一的前提条件是要居中的元素有一个父元素。例子:

<div class="parent">
    <div class="center-me">
        Text, images, whatever suits you.
    </div>
</div>

.parent { 
    /* height can be whatever you want, also auto if you want a child 
       div to be responsible for the sizing */ 
    height: 200px;
}

.center-me { 
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* prefixes needed for cross-browser support */
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

所有主流浏览器和ie9及以上版本都支持(别担心ie8，因为它在今年秋天和winxp一起死了。感谢上帝)。

JS小提琴演示