css制作整体居中

水平居中方法

行内元素或文本居中
对行内元素（如<span>、<a>）或文本，在父元素中设置：

text-align: center;

块级元素居中
对固定宽度的块级元素（如<div>），使用：

margin-left: auto;
margin-right: auto;

需确保元素已设置宽度（如width: 50%;）。

垂直居中方法

单行文本或行内元素
在父元素中设置：

line-height: 与父元素高度相同;

Flexbox 实现垂直居中
父元素使用 Flex 布局：

display: flex;
align-items: center;

Grid 实现垂直居中
父元素使用 Grid 布局：

display: grid;
place-items: center;

水平垂直居中

Flexbox 方案
父元素设置：

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

绝对定位方案
子元素绝对定位并配合 transform：

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

Grid 方案
父元素设置：

display: grid;
place-items: center;

注意事项

• Flexbox 和 Grid 是现代布局的首选方案，兼容性需考虑目标浏览器。
• 绝对定位会脱离文档流，适用于特定场景。