水平居中 + Block子元素定宽 + margin

• 适用于需要子元素固定宽度的场景
• 方法：父元素设为Block类型，子元素设定固定宽度，并在父元素右侧添加margin空间

水平居中 + Inline-block子元素不定宽 + text-align

• 适用于子元素宽度不定的情况
• 方法：父元素设为Inline-block类型，子元素不定宽，父元素左右margin进行水平居中

水平居中 + Inline-block子元素定宽 + text-align

• 适用于需要子元素固定宽度的场景
• 方法：子元素设定固定宽度，父元素使用Inline-block和text-align进行水平居中

水平居中 + Inline子元素不定宽 + text-align

• 注意：Inline元素无法设定宽高，这一方法主要用于展示统一格式

水平垂直居中 + Flex + 子元素不定宽高

• 基础Flex居中方法
• 方法：父元素设为Flex容器，子元素默认不定宽高，居中效果较好

水平垂直居中 + Flex + 子元素不定宽高 + margin

• 组合Flex和margin优化居中效果
• 方法：在Flex基础上适当调整子元素的外边距

水平垂直居中 + Grid + 子元素不定宽高

• 基础Grid居中方法
• 方法：父元素设为Grid容器，子元素自动分布并居中

水平垂直居中 + Grid + 子元素不定宽高(居中属性设置在子元素上)

• 子元素自身具备居中属性
• 方法：在Grid基础上，子元素单独设置display: box，实现居中效果

水平垂直居中 + Grid + 子元素不定宽高 + margin

• 组合Grid和Margin优化居中效果
• 方法：在Grid基础上适当调整子元素外边距

水平垂直居中 + Absolute + 子元素定宽高 + margin

• 适用于需要精确控制位置的场景
• 方法：利用绝对定位，结合margin进行居中

水平垂直居中 + Absolute + 子元素不定宽高 + margin

• 组合Absolute和Margin实现居中
• 方法：父元素Absolute定位，子元素不定宽高，通过Margin控制居中位置

水平垂直居中 + Absolute + 子元素不定宽高 + transform

• 组合Absolute和Transform优化居中效果
• 方法：通过Transform属性进行精确位置控制

水平垂直居中 + Table-cell + 子元素不定宽高 + text-align + vertical-align

• 表格单元格居中方法
• 方法：将子元素放入td元素中，设置text-align和vertical-align

水平垂直居中 + Inline/Inline-block子元素不定宽高 + vertical-align

• 基础Inline/Inline-block居中方法
• 方法：通过vertical-align进行垂直居中

水平垂直居中 + Writing-mode + Inline/Inline-block子元素不定宽高 + text-align

• 注意：方法受默认排版影响，适用性有限

水平垂直居中 + 水平垂直居中 + Block子元素定宽 + 父元素高度由子元素决定 + padding/margin

• Block元素居中方法
• 方法：子元素设定固定宽高，父元素通过padding和margin进行居中

水平垂直居中 + 子元素不定宽高 + 父元素高度由子元素决定 + line-height

• 基础垂直居中方法
• 方法：通过line-height控制子元素垂直位置

正方形十字居中

• 特殊情况居中方法
• 方法：通过绝对定位和Transform控制子元素相对于父元素的位置