如何在父div中垂直居中子div：背景图上叠加居中文字块

你要实现文字块在背景图内垂直居中，最简单的方案是给父容器#mission开启Flex布局，指定交叉轴对齐方式为居中即可：

修改后的CSS代码 #

* {
  background-color: black;
  font-family: Helvetica;
  color: seashell;
  opacity: 0.9;
  font-size: 22px;
}

#mission {
  margin: 0 auto;
  width: 1200px;
  height: 700px;
  background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
  background-repeat: no-repeat;
  /* 新增以下两行即可实现垂直居中 */
  display: flex;
  align-items: center;
}

#mission div {
  background-color: black;
  text-align: center;
  /* 补充这行可以让黑色文字栏铺满整个section宽度，适配示例效果 */
  width: 100%;
}

优化建议 #

你现在给所有元素统一加opacity:0.9会导致父子元素透明度叠加，视觉效果会比预期更通透，建议把通用样式挪到body选择器下，只给需要的元素单独设置透明度即可。

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