推荐使用flex布局，通过display: flex、justify-content和align-items实现子元素水平垂直居中；2. 可用绝对定位结合transform: translate(-50%,-50%)，适用于未知尺寸元素；3. 固定宽高元素可用margin auto配合绝对定位四边为0实现居中；4. CSS Grid通过place-items: center简洁实现；5. 单行文本可设置line-height等于容器高度并text-align: center。现代开发首选flex和grid，定位加transform更灵活，需注意父容器有高度且相对定位。
让元素在父容器中水平垂直居中是CSS中的常见需求，实现方式多样，适用于不同场景。以下是几种常用且实用的方法。
1. 使用 flex 布局（推荐）
Flex布局是最简单、最现代的居中方案，适合大多数现代浏览器。
通过在父元素上设置 display: flex，并使用 justify-content 和 align-items 即可轻松实现。
示例：.parent {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* 需要有高度 */
}
子元素无需额外样式，自动居中。
立即学习“前端免费学习笔记（深入）”；
2. 使用 transform 和绝对定位
适用于已知或未知尺寸的元素，通过 position: absolute 配合 transform 实现。
先将元素定位到父容器中心点，再用 transform 向左上方回退自身宽高的一半。
示例：.parent {
position: relative;
height: 300px;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这种方法不依赖子元素尺寸，灵活性高。
3. 使用 margin auto 配合绝对定位
适用于宽高固定的块级元素。
设置元素的 position: absolute，并手动指定宽高，然后使用 margin: auto 自动计算外边距。
示例：.parent {
position: relative;
height: 300px;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 200px;
height: 100px;
margin: auto;
}
利用盒模型自动分配 margin 实现居中。
4. 使用 grid 布局
CSS Grid 是另一种现代布局方式，居中非常简洁。
将父容器设为 grid 容器，并设置对齐方式即可。
示例：.parent {
display: grid;
place-items: center;
height: 300px;
}
或使用 justify-items 和 align-items 分别控制。
5. 文本内容的行内居中
如果只是想让文本或行内元素居中，可通过 line-height 与容器高度一致实现垂直居中，配合 text-align: center 水平居中。
示例：.box {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
}
只适用于单行文本，多行会失效。
基本上就这些方法，根据实际场景选择。flex 和 grid 最推荐用于现代开发，兼容性好，代码简洁。定位加 transform 更灵活，适合复杂布局。不复杂但容易忽略细节，比如父元素是否设置了相对定位、是否有明确尺寸等。
