2024-04-16 CSS 居中对齐

水平居中

• 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 相等来自动居中。（必须使用定位(脱离标准流)，需要给元素设置高度）

选择方案的建议:

• 优先考虑 flexbox 布局: flexbox 布局提供了更灵活的布局方式，并支持水平和垂直居中。
• 对于固定宽度的元素，可以使用 margin: 0 auto;，简洁易用。
• 对于文本内容，可以使用 text-align: center;，直接设置文本对其方式即可。
• 对于绝对定位元素，可以使用 position: absolute; left: 50%; transform: translateX(-50%); 或 position: absolute; top: 50%; transform: translateY(-50%);，灵活控制元素的位置和居中方式。

以下是一些额外的注意事项:

• 确保元素具有明确的宽高: 如果元素没有明确的宽高，则无法正确进行居中。
• 避免元素内部存在其他居中样式: 如果元素内部存在其他居中样式，可能会与 CSS 居中样式冲突。
• 考虑响应式设计: 在进行居中布局时，需要考虑响应式设计，确保在不同屏幕尺寸下都能正确居中。