可以通过以下方法实现:
<div class="container">
<div class="unknown-height"></div>
<div class="centered-div">内容</div>
</div>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
}
.unknown-height {
/* 设置未知高度的div样式 */
}
.centered-div {
/* 设置水平居中的div样式 */
}
</style>
<div class="container">
<div class="unknown-height"></div>
<div class="centered-div">内容</div>
</div>
<style>
.container {
position: relative;
}
.unknown-height {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 设置未知高度的div样式 */
}
.centered-div {
position: relative;
/* 设置水平居中的div样式 */
}
</style>
以上两种方法都可以实现垂直对齐未知高度的div,并保持水平居中对齐。具体选择哪种方法取决于具体的需求和浏览器兼容性要求。
腾讯云相关产品和产品介绍链接地址:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云