CSS 水平与垂直居中的方法

行内元素

- 水平居中

方法一: 对子元素设置 text-align: center;

方法二: 父元素设置 width: fit-content 再让父元素居中 以达到居中目的

- 垂直居中

方法一: 使子元素行高与高度相同（仅对单行有效）

方法二: 子元素设置 vertical-align: middle; IFC 轴线居中

可将行内中的图片居中

块级元素

- 水平居中

方法一：子元素使用 margin: xx auto;

自身设置：margin-left: auto;margin-right: auto;
合并写法：margin: xx auto;
需要注意块级元素宽度默认 100%，需要指定一个较小的宽度，此法才能生效

方法二：子元素使用绝对定位 positon: absolute;

绝对定位 positon: absolute; ( 父元素需要设置相对定位 position: relative; )
使用它之后，子元素就不能把父元素撑起来了

left: 50%;  /* 先让左边线居中 */
/* margin-left: -width/2; */ /* 使用此法前提需要子元素确定宽度 */
/* left: calc(50% - width/2); */ /* 使用此法前提需要子元素确定宽度 */
transform: translateX(-50%); /* 然后整体左移50%的宽度 */

left: 0;
rigth: 0;
margin: auto;

方法三: 父元素使用对称 padding 以达到子元素居中的效果

方法四：使用flex

弹性布局
子元素默认均匀分布于主轴
父元素要设置 justify-content

display: flex;
justify-content: center; 

使幅轴居中

方法五: 使块级变为 inline-block 通过设置父元素 text-align: center;

- 垂直居中

更普遍垂直的方法

方法一： 使用绝对定位

• 绝对定位 + margin 偏移半个元素（负值）
• 绝对定位 + transform偏移半个元素（-50%）

top: 50%; /* 先让顶边线居中 */
/* margin-top: -50%; */
transform: translateY(-50%); /* 然后整体上移50%的高度 */

以底部为偏移同样可行
注意：这里相对百分比是定位的祖先原元素，若无则为html

方法二：使用flex

align-items

display: flex;
align-items: center;

使主轴居中

方法三: 使块级变为 inline-block 通过设置伪元素before vertical-align: middle;

父元素::before {
  content: "";
  display: inline-block;
  width: 0px;
  height: 200px; /* 值与父元素相同 */
  vertical-align: middle;
}

垂直水平居中方法

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* margin-top: -50%; 
margin-left: -50%; */

display: flex;
justify-content: center; 
align-items: center;

---

其他方法：
利用 grid 栅格布局
calc 计算子元素padding 改变背景范围