具有设置的长宽比和垂直和水平居中内容的Div？

Question

我正在尝试创建一个div，其宽度是其父div的60％，高度是其自身宽度的40％。 div必须保持此长宽比。

div应当包含垂直和水平居中的文本（多于一行）。

我不能为此使用JS，只能使用HTML和CSS。

我尝试了使用顶部/底部填充技巧来创建具有给定宽高比的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>

Answer 1

您可以使用padding技巧，然后将元素移出流程，以免受到填充的影响：

.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>

Answer 2

您可以使用javascript / jQuery设置特定高度：

import numpy as np

x = np.array([[1, 5], [2, 8]])

y = np.asanyarray([x] * 40)

print(y.shape)