试试这:

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

<center>

我被最简单的中心所知道的混乱了吗?

</center>

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

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

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

只是这样做:

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

CSS

#outer{
  display: grid;
  place-items: center;
}

#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 id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}