以垂直为中心的DIV:

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

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

使用:

<div id="parent">
  <div class="child"></div>
</div>

风格:

#parent {
   display: flex;
   justify-content: center;
}

如果你想把它集中在水平上,你应该写下如下:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}

您可以垂直调整任何元素,使用:

<div align=center>
    (code goes here)
</div>

或:

<!-- css here -->
    .center-me {
        margin: 0 auto;
    }

<!-- html here -->
    <div class="center-me">
        (code goes here)
    </div>

例如,请参见此链接和下面的剪辑:

div#outer { 高度: 120px; 背景颜色: 红色; } div#内部 { 宽度: 50%; 高度: 100%; 背景颜色: 绿色; 边缘: 0 自动; 文本平衡: 中心; /* 文本平衡到中心垂直. */ 线高度: 120px; /* 文本平衡到中心垂直。

如果你有很多孩子在一个父母之下,那么你的CSS内容应该像这个例子。

HTML 内容看起来喜欢此:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

然后,看看这个例子在Fiddle。

CSS

#inner {
  display: table;
  margin: 0 auto; 
}

HTML

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

只是这样做:

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

CSS

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