<分区>
<分区>
我有一个位于页面中间的元素。如果页面缩小到小于元素的高度，我仍然需要显示元素的顶部而不是居中。我希望元素的容器可以滚动。
.card-display {
margin: auto;
top: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 400px;
background-color: grey;
border-radius: 10px;
}<div class="card-display" >
<div>
always need top line visible (i.e., if there is enough container height to fit the grey element, it should be vertically centered, otherwise container have scrolling)
</div>
</div>最佳答案
检查它是否适合你: 包裹卡片展示以应用 Flex 居中方式。 jsfiddle
.container {
display:flex;
align-items: center;
justify-content: center;
position:absolute;
width: 100%;
height: 100%;
}
.card-display {
align-items:center;
position:absolute;
width: 300px;
height: 400px;
border-radius: 10px;
background-color: gray
}
@media screen and (max-height:400px) {
body {
background-color: blue;
}
.container {
align-items:baseline;
}
}
html:
<div class="container">
<div class="card-display">
<div>
always need top line visible
</div>
</div>
</div>
关于html - 如何根据窗口高度使元素滚动或居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51482430/