如何用CSS在父div中居中子div（老挝国旗项目）

问题分析 #

你的代码中父容器缺少居中相关的样式配置，导致子元素无法正确定位在父容器内部。以下是几种无需修改HTML结构的主流居中方案，适配不同场景需求：

1. Flexbox布局（推荐） #

Flexbox是现代CSS布局的首选方案，代码简洁且兼容性良好，能轻松实现水平+垂直居中，还可灵活控制子元素的排列逻辑。

针对你的代码，修改CSS如下：

/* Write your CSS Code here */
.flag{
  background-color: red;
  width: 900px;
  height: 600px;
  /* 让flag内部元素垂直排列并水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flag>p{
  color: white;
  font-family:Georgia, 'Times New Roman', Times, serif;
  font-size:4rem ;
  text-align: center;
  margin: 1rem 0; /* 清除默认margin，避免布局偏移 */
}
/* 给red-box设置flex，让内部的box-blue居中 */
.flag .red-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-blue{
  background-color: blue;
  width: 900px;
  height: 300px;
  /* 若需要让box-blue内部的元素（比如后续的国旗圆圈）居中，同样添加flex */
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-blue>p{
  color: black;
  margin: 0;
}

2. Grid布局（极简方案） #

Grid布局用一行代码即可实现居中，适合简单的单元素居中场景，语法更简洁。

核心代码示例：

/* 给父容器添加 */
.parent-div {
  display: grid;
  place-items: center;
}

对应到你的代码，只需将.flag .red-box和.box-blue的flex样式替换为上述Grid样式即可。

3. 绝对定位+Transform（兼容旧浏览器） #

如果需要兼容IE9及以上版本，可使用绝对定位结合transform的方案，缺点是子元素脱离文档流，需注意父容器的定位设置。

核心代码示例：

.parent-div {
  position: relative; /* 父容器必须设置相对定位 */
}
.child-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 反向偏移自身宽高的50%，实现居中 */
}

方案对比 #

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