将h2相对于父容器居中

Question

我想将h2相对于其父容器（圆角矩形）居中，但也希望图像（紫色正方形）垂直填充div，如下图所示。问题在于图像的高度与h2块元素的框重叠。到目前为止，这是我使用flexbox的结果：

.topic-ex {
  display: flex;
  flex-direction: column;
}

.topic-ex h2 {
  text-align: center;
}

.topic-ex-info {
  display: flex;
}

<div class="topic-ex">
  <h2>Text</h2>
  <div class="topic-ex-info">
    <img src="https://placeholder.pics/svg/500" alt="">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

Answer 1

我稍微更改了您的html布局，还添加了一些新的CSS规则： Fiddle

对于h2居中：我设置了父容器position: relative;和h2 position: absolute;。

left: 50%;将其移动到x轴的中心，transform: translate(-50%);将其移动到宽度的一半。

HTML：

<div class="topic-ex">
   <h2>Text</h2>
  <img src="https://placeholder.pics/svg/500" alt="">
  <div class="topic-ex-info">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

CSS：

.topic-ex {
  display: flex;
  border: 3px solid black;
  border-radius: 30px;
  padding: 10px;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
}

.topic-ex h2 {
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 0;
}

.topic-ex img{
  width: 150px;
  height: 150px;
}

.topic-ex-info {
  width: 70%;
}

只要需要，就可以玩游戏以达到完全相同的外观。

Answer 2

溢出：无；在紫色的盒子上。您还可以将紫色框的z-index添加到+100之类的位置，使其位于边框的前面，但也不会溢出到文档的其余部分，因为它位于边框div内并且具有属性具有无属性的显示。