Question

我正在尝试为网页制作展示部分。它由一个div（带有一个（响应的）背景图像）和一个在此图像上水平和垂直居中的标头组成。我设法获取图像并使其具有响应能力，并且标题居中，但是当窗口尺寸变小时，出现了我的问题。

我正在使用position：absolute，top属性，并进行变换以使其居中，但是top属性仅在父容器中指定height时才有效。但是，当窗口缩小到图像开始缩小到其原始高度以下的位置时，文本不会保持垂直居中，而只能保持水平居中（因为我离开了顶部的原始高度（800像素））。 / p>

由于图像尺寸不断变化，我不能随便使用媒体查询来更改高度，也不能使用height，因为top属性根本无法使用，所以我对如何使用感到有些困惑来解决这个问题。

以下是我的代码的相关部分：

HTML：

<section class="showcase">
  <div class="showcase-container">
    <h1 class="centered"><span class="highlight">BR</span> Architects</h1>
  </div>
</section>

CSS：

.container {
  width: 80%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  height: auto;
}

.showcase-container {
  width: 80%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  height: 800px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 1

我可能只是猜测，因为我不知道它的真实外观，但是我假设了很少的事情，并且结果是我将使用普通图像，使其变为块状并在其上显示div，而不是背景图像将高度保留为任何大小，请看：

.showcase-container {
  width: 80%;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.showcase-container img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  max-width: 1200px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 5px;
  padding: 10px 20px;
}

<section class="showcase">
  <div class="showcase-container">
    <img src="https://source.unsplash.com/random/1200x700" alt="">
    <h1 class="centered"><span class="highlight">BR</span> Architects</h1>
  </div>
</section>

Answer 2

请参阅MDN的<figcaption>文档。

<figure>
    <img src="/media/examples/hamster.jpg" alt="a cute hamster" />
    <figcaption>Hamster by Ricky Kharawala on Unsplash</figcaption>
</figure>

Answer 3

如果我理解这项权利，那是说您不必担心图像始终保持800px的高度，您只希望h1保持居中。在那种情况下，这真的很简单。

只需将图像添加为背景，将背景尺寸设置为Cover，然后通过将容器的高度设置为100vh来确保容器的大小不大于窗口，而通过设置其最大高度则确保容器的高度不超过800px。 / p>

.showcase-container {
  /* your styles here */
  background-image: url('yourimage.jpg');
  background-size: cover;
  height: 100vh;
  max-height: 800px;
}

或者，如果您需要使其独立于容器而在窗口中垂直居中，则可以随时将top: 50%;更改为top: 50vh;并相对于主体定位。

使文字在响应图像中居中

3 个答案: