无法将Horizontal-Container div同时实现水平垂直居中问题求助

问题根源 #

.Horizontal-Container设置了height: auto，默认块级元素高度由内部内容撑开，此时父容器高度与内部黄色子元素高度完全相等，垂直方向无剩余空间，align-items: center没有生效基础，因此仅能实现水平居中。

修复方案 #

给.Horizontal-Container设置明确高度，若需要实现在整个页面中居中，直接让容器占满视口高度，同时清除body默认外边距避免出现滚动条即可，修正后代码如下：

body {
  background-color: #62306D;
  margin: 0; /* 清除浏览器默认边距 */
}

.Horizontal-Container {
  width: 100%;
  min-height: 100vh; /* 占满整个视口高度，提供垂直居中所需的剩余空间 */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.Yellow {
  background-color: #F7EC7D;
  width: 90px;
  height: 180px;
}

原HTML代码无需修改。

补充说明：如果不需要容器占满全页面，而是要在指定父元素内居中，只需要给父元素设置明确高度后，将.Horizontal-Container的高度属性改为100%即可。

内容的提问来源于stack exchange，提问作者Ace