使用此代码:

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

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

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

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

可以使用中心标签为方便

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

我们可以使用下一个CSS的类,允许中心垂直和垂直对其父母的任何元素:

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

在我的情况下,我需要在一个按钮下中心(在屏幕上)一个下载菜单(使用 flexbox 为它的项目),可以有不同的位置垂直。

#outer { margin: auto; left: 0; right: 0; position: fixed; } #inner { text-align: center; } <div id="outer"> <div id="inner">Foo foo</div> </div>

上面的代码使下载始终集中在屏幕上的所有尺寸的设备,无论下载按钮在哪里垂直。

#outer { 宽度: 160px; padding: 5px; 边界风格: 固体; 边界宽度: 薄; 显示: 区块; } 内部 { 边界: 自动; 背景颜色: 光蓝; 边界风格: 固体; 边界宽度: 薄; 宽度: 80px; padding: 10px; 文本平衡: 中心; } <div id="outer"> <div id="inner">Foo foo</div> </div>