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

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

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

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

三层dom结构的代码如下：

html 复制代码

<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

html 复制代码

<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，就可以实现内容在父元素中的垂直居中。

这里面的知识点是，flex 布局中的每个项目设置了 margin:auto 之后会利用剩余空间自动分配外边距，且优先级高于 justify-content 和 align-items

除了 flex 布局，grid 布局也可以使用margin: auto实现垂直水平居中。

如果是普通的块级元素只能使用 margin: 0 auto实现水平居中，但是垂直居中就无法实现，所以还是尽量使用 flex布局吧。