CSS容器如何实现居中对齐？通过Flexbox和Grid布局实现水平垂直居中

Flexbox 和 Grid 是领先的现代 CSS 居中解决方案。
Flexbox适合一维布局，代码简单。
网格适合二维布局，提供更精确的控制。
传统方法如绝对定位+变换或自动保证金等，代码长，响应能力低。

根据您的需要选择 Flexbox 或 Grid。
使用 Flexbox 的一维布局。
网格用于二维布局。
混合网格体 + Flexbox 单元。

利用CSS Flexbox实现元素垂直与水平居中对齐

说白了，使用Flexbox实现垂直和水平居中其实很简单。
核心基于两个属性：justify-content 和align-elements。

展开来说，我们先来说最重要的一点：display:flex设置将主容器变成了灵活布局，子元素自动变成了灵活元素。
例如，在我们去年运行的项目中，按钮图标和文本垂直居中。
只需应用 .container{display:flex;灵活方向：立柱；调整内容：居中；对齐项目：居中；}。
还有一点要注意的是方向。
flex-direction 确定主轴是水平还是垂直。
当主轴是列（垂直）时，content-justify实际上控制垂直居中，而align-elements控制水平居中。
很多人不注意这一点。
还有另一个基本细节。
例如，按钮宽度为 1 2 0px，高度为 8 0px。
span.btn__img 和 span.btn__txt 子元素可以通过横轴居中。
但是，如果子元素的总高度超过了容器，例如将margin-bottom设置为5 px，那么就必须考虑padding所消耗的空间。

一开始我以为设置内容对齐和元素居中对齐就足够了，但后来我发现有些不对劲。
例如，当灵活方向为row时，content-justify控制水平居中，但alignment-items仍然控制垂直居中，所以不能混淆。
等等，还有一件事。
你可能需要在旧版本的 IE 浏览器中添加 -webkit 前缀，但这实际上很烦人。
现在我基本上不用担心这个问题了。

我们建议您尝试使用 flex-wrap:wrap 来修复子元素溢出问题。
一旦您熟悉了这种组合，您的响应式布局就基本完成了。