水平居中
-
margin: 0 auto;：设置当前块级元素(固定宽度) ，通过左右 margin 相等来自动居中。 -
display: flex; justify-content: center;：适用于灵活宽度的元素，使用 flexbox 布局并设置 justify-content 属性为 center 来居中。 -
text-align: center;：适用于文本内容，直接设置父级元素文本对其方式为 center 即可。 - 绝对定位：
1.position: absolute; left: 50%; transform: translateX(-50%);：适用于元素已知宽度绝对定位元素，使用 position 和 transform 属性来设置元素的位置和偏移量，实现居中。
2.元素不知宽度情况下（或者不想考虑元素宽度）, left: 0;right: 0; margin: 0 auto;
垂直居中
- 行高(令单行文字垂直居中)：令line-height = 文字所在盒子高度，文字将垂直居中显示。
-
vertical-align: middle;：适用于行内元素，例如文本、图片等，直接设置 vertical-align 属性为 middle 即可。 -
display: flex; align-items: center;：适用于 flexbox 布局，设置 align-items 属性为 center 来垂直居中（flex container中所有的元素都会垂直居中显示）。 -
position: absolute; top: 50%; transform: translateY(-50%);：适用于绝对定位元素，使用 position 和 transform 属性来设置元素的位置和偏移量，实现居中。 -
top: 0;bottom: 0;margin: auto 0;：适用于固定高度的元素，通过上下 margin 相等来自动居中。（必须使用定位(脱离标准流)，需要给元素设置高度）
image.png
选择方案的建议:
- 优先考虑 flexbox 布局: flexbox 布局提供了更灵活的布局方式，并支持水平和垂直居中。
-
对于固定宽度的元素，可以使用
margin: 0 auto;，简洁易用。 -
对于文本内容，可以使用
text-align: center;，直接设置文本对其方式即可。 -
对于绝对定位元素，可以使用
position: absolute; left: 50%; transform: translateX(-50%);或position: absolute; top: 50%; transform: translateY(-50%);，灵活控制元素的位置和居中方式。
以下是一些额外的注意事项:
- 确保元素具有明确的宽高: 如果元素没有明确的宽高，则无法正确进行居中。
- 避免元素内部存在其他居中样式: 如果元素内部存在其他居中样式，可能会与 CSS 居中样式冲突。
- 考虑响应式设计: 在进行居中布局时，需要考虑响应式设计，确保在不同屏幕尺寸下都能正确居中。
