当前位置：首页 > news >正文

元素滚动和内容垂直居中同时存在，完美的 html 元素垂直居中的方法flex + margin: auto

news 来源：原创 2025/4/24 8:26:31

假设有一个元素 div 作为父容器且宽高固定，里面的内容 content 在父容器中垂直/水平都居中，且当内容很多时，父元素滚动overflow: auto，content的内容要能够完全展示。

我之前在这篇文档提到了两个方法：

使用 flex + safe 关键字【不兼容safari】
三层 dom 结构

三层dom结构的代码如下：

<template><div class="outer-wrapper"><div class="inner-wrapper"><div class="content">真正的内容区域</div></div></div>
</template>
<style lang="scss" scoped>
.outer-wrapper {width: 100%; // 外层设置宽高height: 100%;border: 2px solid;display: flex;flex-direction: column;align-items: center; // 外层可以设置垂直和水平居中justify-content: center;padding: 20px;.inner-wrapper {border: 2px solid red;width: 80%; // 内层只能设置宽度，不能设置高度，高度让内容自动撑开，才能达到居中的效果display: flex;flex-direction: column;align-items: center; // 内层只能设置水平居中，不能设置垂直居中padding: 20px;overflow: auto; // 给内层设置overflow.content {width: 100%;height: 2000px;flex-shrink: 0;background: #ccc;}}
}
</style>

虽然这种方法可以实现功能，但是需要在父元素和 content 之间新包一层 div【inner-wrapper】，且有很多限制，比如，内层inner-wrapper不能设置高度，且增加了一层冗余的div，很麻烦。

下面有一种完美的实现方式: flex + margin:auto

<template><div class="outer-wrapper"><div class="content">真正的内容区域</div></div>
</template>
<style lang="scss" scoped>
.outer-wrapper {width: 100%; // 外层设置宽高height: 100%;border: 2px solid;display: flex;justify-content: center; // 可以设置水平居中，但实际不会用这个属性布局align-items: center; // 可以设置垂直居中，但实际不会用这个属性布局padding: 20px;overflow: auto; // 设置滚动.content {margin: auto; // 实际的垂直居中布局使用的属性width: 100%;height: 200px;flex-shrink: 0;background: #ccc;}
}
</style>

上面的代码，父元素只需要按照普通的 flex 布局写就行，内容元素增加 margin: auto，就可以实现内容在父元素中的垂直居中。