我很抱歉,但这个90年代的婴儿只是为我工作:

<div id="outer">  
  <center>Foo foo</center>
</div>

我要为这个罪而去地狱吗?

中心的主要属性是边界:自动和宽度:根据要求:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}

以垂直为中心的DIV:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  display: inline-block;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

将 CSS 添加到您的内部 div. 设置边界: 0 自动,并设置其宽度低于 100%,这是外部 div 的宽度。

<div id="outer" style="width:100%"> 
    <div id="inner" style="margin:0 auto;width:50%">Foo foo</div> 
</div>

这将带来所需的结果。

#centered { 位置: 绝对; 左: 50%; 边缘左: -100px; } <div id="outer" style="width:200px"> <div id="centered"> Foo foo</div> </div>

确保母元素定位,即相对、固定、绝对或粘贴。

如果你不知道你的 div 的宽度,你可以使用 transform:translateX(-50%);而不是负面边界。

使用 CSS calc(),代码可以变得更简单:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

原则仍然是相同的;把项目放在中间,并补偿宽度。

而不是多种包装和/或自动边缘,这个简单的解决方案对我来说工作:

<div style="top: 50%; left: 50%;
    height: 100px; width: 100px;
    margin-top: -50px; margin-left: -50px;
    background: url('lib/loading.gif') no-repeat center #fff;
    text-align: center;
    position: fixed; z-index: 9002;">Loading...</div>

它将Div放在视图(垂直和水平)的中心,尺寸和调整尺寸,中心背景图像(垂直和水平),中心文本(水平),并保持Div在视图和内容的顶部。