设置宽高比且垂直水平居中的内容的Div？

Question

我想创建一个 div，它的宽度为其父 div 的 60%，高度为自身宽度的 40%。该 div 必须保持这个纵横比。

div 内应包含文字（不止一行），并且要垂直和水平居中。 我不能使用 JS 实现，只能使用 HTML 和 CSS。

我尝试使用上下 padding 技巧来创建具有给定纵横比的 div，这个技巧可以用，但是我无法垂直居中文本。

以下代码片段示例看起来很理想，只是没有固定的长宽比。

.container {
  width: 80%;
  background: grey;
}

.ratio {
  background: white;
  margin: 0px auto 0px auto;
  width: 60%;
  height: 300px; /* Should be 40% of width */
  
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

.text {
  text-align: center;
}

<div class="container">
  <h2>
    Heading
  </h2>
  <div class="ratio">
    <div class="text">
      Lorem ipsum dolor sit amet, ea mel case eros lorem. In etiam aperiam consetetur vix, ex duis postulant intellegam eam, alienum officiis antiopam duo cu. Cum et dico hinc iudicabit, sonet senserit petentium ex cum, ex usu intellegam theophrastus.
    </div>
  </div>
  <p>
    Other content
  </p>
</div>

- mse

---

可能是CSS在div块内水平和垂直居中文本 的重复问题。 - Selvam Elumalai

无法理解，因为您链接的问题不需要一个具有固定像素比的div，而不知道其像素大小。 - mse

使用填充技巧并将文本设置为绝对居中位置，以使其不受填充的影响。 - Temani Afif

@TemaniAfif，你能提供一个可用的示例吗？我尝试了类似的东西，但是只有第一行垂直居中，而不是整个文本块。 - mse

添加了一个答案。 - Temani Afif

Answer 1

您可以使用“内边距技巧”，然后将元素移出流，这样它就不会受到内边距的影响：

.container {
  width: 80%;
  background: grey;
}

.ratio {
  background: white;
  margin: 0px auto 0px auto;
  width: 60%;
  padding-top:40%;
  position:relative;
}

.text {
  text-align: center;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

<div class="container">
  <h2>
    Heading
  </h2>
  <div class="ratio">
    <div class="text">
      Lorem ipsum dolor sit amet, ea mel case eros lorem. In etiam aperiam consetetur vix, ex duis postulant intellegam eam, alienum officiis antiopam duo cu. Cum et dico hinc iudicabit, sonet senserit petentium ex cum, ex usu intellegam theophrastus.
    </div>
  </div>
  <p>
    Other content
  </p>
</div>

- Temani Afif

---

非常感谢，使用 transform: translateY(-50%) 的这种组合确实解决了问题！ - mse

Answer 2

您可以使用JavaScript/jQuery来设置特定的高度：

$('.ratio').height($('.ratio').width()*.4);

- Mirza Mašić

---

谢谢您的建议，但对于解决这个特定的问题，我只能使用 CSS 和 HTML。我会更新我的问题以澄清这一点。 - mse

在这种情况下，您可以使用视口宽度（vw）。它是视口的百分比，与父元素的宽度无关。因此，如果您的容器需要占屏幕宽度的60％，则将其宽度设置为60vw，但是，您还可以使用相同的“度量”来设置高度-例如，40vw（其高度为屏幕宽度的40％）。无论如何，比率将是固定的。尝试通过该方法进行实验，这可能会解决您的“问题”。 - Mirza Mašić

那也不行，因为它必须是父级div的60％宽度，而不是视口宽度的60％。 - mse