根据内容高度更新 div 边距/位置

Question

我正在创建一个页面布局。页面内容(在示例中显示为文本动态内容(更改高度，但始终具有相同的宽度。

我想使用以下公式计算内容的上边距(或相应地定位内容(：100vh - dynamic content height * 0.4

有没有办法使用 css 规则来实现这一点，或者我需要提前知道我的动态内容的高度？

.container {
height: 100vh;
width: 100vw;
}
.content {
width: 320px;
background-color: yellow;
margin: 0 auto;
}

<div class='container'>
<div class='content'>
Some dynamic content...
</div>
</div>

Answer 1

您可以使用transform: translateY(calc(100vh - 40%))因为translateY百分比与元素的高度有关：

.container {
height: 100vh;
width: 100vw;
}
.content {
width: 320px;
background-color: yellow;
margin: 0 auto;
transform: translateY(calc(50vh - 40%)); /** I've used 50vh to avoid scrolling **/
}
body {
margin: 0;
}

<div class='container'>
<div class='content'>
Some dynamic content...
</div>
</div>