二手交易网站建设方案wordpress代码实现下载
假设有一个元素 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，就可以实现内容在父元素中的垂直居中。
这里面的知识点是，flex 布局中的每个项目设置了 margin:auto 之后会利用剩余空间自动分配外边距，且优先级高于 justify-content 和 align-items
除了 flex 布局，grid 布局也可以使用margin: auto实现垂直水平居中。
如果是普通的块级元素只能使用 margin: 0 auto实现水平居中，但是垂直居中就无法实现，所以还是尽量使用 flex布局吧。