Html 如何使用flexbox使容器垂直居中

我正在尝试使用flexbox垂直居中放置容器。奇怪的是，它不起作用，我正在遵循CSS技巧中的Flexbox指南

HTML:

html，
身体{
高度：100vh；
}
#关于{
字体系列：“Gloria Halleujah”，草书；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
#关于img{
边界半径：50%；
宽度：200px；
高度：200px；
}
#关于.信息{
边缘顶部：50px；
}
#关于什么{
边缘顶部：50px；
}

Lorem ipsum door sit amet concertetur，adipising elit。这是我的练习，我要去参加！如果eligendi减去nemo，那么我们就可以在新的一年里享受到真正的自由。Illum，坐吧
我的技能：

HTML5:

95%
CSS3/SaSS：

75%
引导：

40%
Javascript：

20%

如上的其他问题中所述，要居中的物品的父项必须是全高。在您的例子中，只有html主体具有完整高度。另外，使用父对象上的flexbox将子对象居中放置

#about

div

• 使用

  h-100

  使

  部分和
  容器也达到全高

• 使

  .container

  flexbox和自动边距（

  my auto

  ）垂直居中于子

  #about

  div

---

---

在

正文

标签中添加：

正文{
高度：100vh；/*小心，你写错了*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

属性名称为

高度

非

高度

…添加

高度：100vhto#aboutYeah，这是我的错，抱歉：请为您的引导语法调整一些快速建议。您需要在列类上指定类前缀。在您的例子中，如果希望列从移动设备到桌面的宽度为100%，则类为
col-xs-12
。请参考这个：上帝。。答案总是那么简单。。谢谢你们。
<section class="h-100">
    <div class="container h-100 d-flex flex-column">
        <div id="about" class="my-auto">
            ....
        </div>
    </div>
</section>

   <section class="h-100">
        <div class="container h-100 d-flex flex-column justify-content-center">
            <div id="about">
                ....
            </div>
        </div>
    </section>