持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情
- 水平居中
行内元素：text-align: center;（text-align一般运用在块级元素中，使其中的文本对齐。实际上，运用到块级元素中的text-align会使其中包含的内联元素水平对齐）
块级元素：margin: 0 auto;（前提是块元素的高度和宽度已知，如果有多个块元素，需要将多个元素包裹在一个元素中）
通用：1.Flex布局👇：在Flex布局中，justify-context可以用于设置弹性盒子元素在主轴方向上的对齐方式
如果弹性盒子的主轴是垂直方向，可以使用align-items来👆代替justify-content以实现元素的水平居中
2.Grid布局：在Grid布局中，justify-content属性会沿着行轴线（水平方向）在网格容器中对齐网格。当属性值为center时，就可以将网格对齐到网格容器的水平居中位置
3.绝对定位：👇可以通过将使用绝对定位和变换实现元素的水平居中；
如果块元素的宽度已知，可以使用负边距来代替transform👆
- 垂直居中
块级元素：绝对定位：👇可以通过将使用绝对定位和变换实现元素的垂直居中；
如果块元素的高度已知，可以使用负边距来代替transform👆
通用：1.Flex布局：在Flex布局中，align-items属性用来定义flex子项在flex容器的当前行的侧轴👇（纵轴）方向上的对齐方式。当其属性值为center时，元素位于容器的中心；
如果将Flex的主轴切换为垂直方向，则需要使用justify-content👆来代替align-items以实现元素的垂直居中
2.Grid布局：在Grid布局中，可以使用align-content属性将项目垂直居中到其网格区域；👇
如果将网格的排列方向更改为水平，垂直居中依旧是生效的👆
- 水平垂直居中
绝对定位：👇使元素垂直居中最通用的方法就是使用绝对定位和transform
如果元素的高度和宽度已知，也可以使用margin来代替transform👆
Flex布局：👇在Flex布局中，可以结合上面的水平和垂直居中来实现水平垂直居中
Grid布局：在Grid布局中，可以使用以下形式来实现元素的水平垂直居中👆；place-content属性是align-content和justify-content的简写，当该属性的值为center时，所有的子元素堆叠在父元素的中间对齐
