html - 如何将子 div 置于父级的中心并将其固定在顶部？

Question

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

编辑:子项需要固定在顶部，这样当其他子项溢出时，它们可以滚动，但它会保持在原位。

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