HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

您还可以创建中间件div#centered框，以绝对值、左财产和右财产居中，不带width属性，然后将主内容div设置为其具有display:inline-block框的子项，并使用为其中间件父框设置的text-align:center将其居中

#集装箱{位置：相对；宽度：300px；高度：300px；边框：实心1px蓝色；颜色：#DDDDD；}#居中{位置：绝对；文本对齐：居中；边距：自动；顶部：20px；左：0；右：0；边框：1px红色虚线；填充：10px 0px；}#居中>div{边框：实心1px红色；显示：内联块；颜色：黑色；}<div id=“container”>你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界<div id=“center”>＜div＞你好世界<br/>我不知道我的宽度<br/>但我还是绝对的！</div></div></div>

如果元素具有宽度和高度，则此解决方案有效

.包装器{宽度：300px；高度：200px；背景色：番茄；位置：相对；}.内容{宽度：100px；高度：100px；背景色：深蓝色；位置：绝对；顶部：0；右：0；底部：0；左：0；边距：自动；}<div class=“wrapper”><div class=“content”></div></div>

这是我想出的一个技巧，让DIV精确地浮在页面的中心。当然，它确实很难看，但它适用于所有浏览器。

点和虚线

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

清洁工

哇，那五年刚刚过去，不是吗？

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
    <table style="position:fixed" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="padding:10px">
                    <img src="Happy.PM.png">
                    <h2>Stays in the Middle</h2>
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

响应式解决方案

如果您不需要支持IE8或更低版本，这里有一个很好的解决方案，可用于响应设计或未知尺寸。

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.外部{位置：相对；/*或绝对值*//*不必要的样式设置财产*/保证金：5%；宽度：80%；高度：500px；边框：1px纯红色；}.内部{位置：绝对；左：50%；顶部：50%；转换：转换（-50%，-50%）；/*不必要的样式设置财产*/最大宽度：50%；文本对齐：居中；边框：1px纯蓝色；}<div class=“outer”><div class=“inner”>我总是居中<br/>无论我有多少文本、高度或宽度<br/>维度或我的父级也不相关</div></div>

这是一个JS Fiddle

线索是，剩下的：50%是相对于父对象的，而平移变换是相对于元素宽度/高度的。

这样，您就拥有了一个完全居中的元素，子元素和父元素都具有灵活的宽度。奖励：即使孩子比父母大，这也能奏效。

您也可以使用此选项垂直居中（同样，父级和子级的宽度和高度可以完全灵活（和/或未知））：

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

请记住，您可能还需要以转换供应商为前缀。例如-webkit转换：translate（-50%，-50%）；

在寻找解决方案时，我得到了前面的答案，可以将内容以Matthias Weiler的答案为中心，但使用文本对齐：

#content{
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

它与谷歌Chrome和Firefox配合使用。