html - 如何在父级中居中子 div 并将其固定到顶部？

Question

我试图让一个子 div 在父 div 内水平(左/右)居中，并固定在父 div 的顶部，但我不知道如何在 CSS 中做到这一点 :-( 我可以居中它，我可以修复它，但任何时候我尝试组合子 div 都会固定在它的自然位置(左侧)。

编辑: child 需要固定在顶部，这样当其他 child 溢出时，他们可以滚动，但它会留在原地。

Answer 1

使用 flexbox - Bootstrap3 和 Bootstrap4 之间的主要区别是从 float 切换到 flexbox 是有原因的!

例子:

#parent{height:100px;background:red;}
#parent{display:flex;align-items:flex-start;justify-content:center;}

#child{background:yellow;}

XXX#child{flex-grow:1;text-align:center;} /* Uncomment if you want row to be full-width */

<div id="parent">
  <div id="child">
     Here is some text
  </div>
</div>

引用资料:

Excellent flexbox cheatsheet

Excellenter short Video Tutorial