水平居中可用text-align: center（行内元素）或margin: 0 auto（定宽块级元素）；2. Flex布局通过justify-content和align-items实现全居中，推荐现代项目使用；3. 绝对定位配合transform: translate(-50%,-50%)可实现未知尺寸元素居中；4. Grid布局用place-items: center简洁实现完全居中，适合复杂场景。
实现元素居中是前端开发中的常见需求，具体方法取决于元素类型、是否固定尺寸以及使用的是传统布局还是现代布局。以下是几种常用且实用的 CSS 居中方式。
1. 水平居中：行内或行内块元素
对于 text-align: center 可以让行内元素（如 span、img）在其父容器中水平居中。
适用场景：段落文字、图片等行内内容。示例：
.parent {
text-align: center;
}
.child {
display: inline-block;
}
2. 水平居中：块级元素（已知宽度）
对设置了宽度的块级元素，可以通过左右外边距自动分配实现居中。
立即学习“前端免费学习笔记（深入）”；
关键属性：margin: 0 auto示例：
.box {
width: 300px;
margin: 0 auto;
}
3. 使用 Flex 布局实现居中（推荐）
Flex 是最灵活、最常用的居中方案，支持水平、垂直或完全居中。
只需在父容器上设置 flex 属性。- 水平居中：justify-content: center
- 垂直居中：align-items: center
- 完全居中：同时设置以上两个属性
示例：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 确保有高度 */
}
4. 使用绝对定位 + transform
适用于脱离文档流的定位元素，尤其适合模态框或提示框。
思路：将元素从顶部左侧移动50%，再用 transform 回退自身宽高的一半。示例：
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这种方法不需要知道元素的具体尺寸，兼容性好，广泛用于绝对定位居中。
5. Grid 布局居中
CSS Grid 也可以轻松实现居中，适合复杂布局场景。
示例：
.wrapper {
display: grid;
place-items: center; /* 同时居中内容 */
height: 100vh;
}
place-items: center 等价于水平和垂直居中的简写。基本上就这些常用方法。选择哪种方式主要看你的结构和浏览器支持要求。现代项目推荐优先使用 Flex 或 Grid，简单直接，维护性强。
