目标是让包含两个图像的 div(在本例中为 willscape-holder)始终 float 在视口(viewport)中间。有没有办法做到这一点，而不必为每种类型的屏幕调整顶部和底部边距的媒体查询？提前感谢您的帮助。
body {
background: url(../images/willscape-bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
/* background-position: center top; */
background-attachment: fixed;
}
.container {
height: 100vh;
}
.willscape-holder {
width: 100%;
max-width: 350px;
margin: 0 auto;
padding: 0 20px;
}
#willscape-logo {
padding: 0 60px;
width: 100%;
}
#willscape-title {
width: 100%;
max-width: 500px;
}<body>
<div class="container">
<div class="willscape-holder">
<a href="" target="_blank"><img class="img-responsive" id="willscape-logo" src="assets/images/willscape-logo.png" /></a>
<a href="" target="_blank"><img class="img-responsive" id="willscape-title" src="assets/images/willscape.png" /></a>
</div>
</div>
</body>最佳答案
您可以使用视口(viewport)的高度和 css calc 函数来计算图像的上边距:
.willscape-holder {
width: 100%;
max-width: 350px;
margin: 0 auto;
padding: 0 20px;
margin-top: calc((100vh - 500px) / 2);
}
其中 500 是 2 个框的像素高度。
关于html - 如何始终使用CSS使div float 在视口(viewport)中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45687196/