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

有几种方法可以实现这一点:使用“flex”,“positioning”,“margin”等。

我推荐使用“Flex”

#outer {
   display: flex;
   justify-content: center;
   align-items: center;  /* if you also need vertical center */
}

使用地平线定位

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  translate: transformX(-50%)
}

垂直和垂直,使用定位

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: transform(-50%, -50%)
}

使用边界的垂直调整

#inner {
 width: fit-content;
 margin: 0 auto;
}

我在各个项目中使用的最好是

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Fiddle 链接

您可以添加另一个具有相同尺寸的Div,并将其移动到左侧 -50%(半宽的Div)和50%的Div。

此分類上一篇: <div id="outer"> <div id="inner"><div>Foo foo</div></div> </div>

一个非常简单的和跨浏览器的答案到水平中心是将这个规则应用到母元素:

.parentBox {
    display: flex;
    justify-content: center
}

您可以使用链接 https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p=preview

.outer{
      display: table;
      width: 100%;
      height: 100%;
}
.inner {
    vertical-align: middle;
}

参考 https://v4-alpha.getbootstrap.com/例子/覆盖/