在css布局中，元素居中分为水平居中、垂直居中和水平垂直同时居中三类，不同类型的元素和不同的布局场景需要匹配对应的实现方案，下面逐一介绍常用的技巧。
一、水平居中实现技巧
1. 行内元素水平居中
对于<span>、<a>这类行内元素，或者<img>这类行内块元素，只需要给其父元素设置text-align: center即可实现水平居中。
/* 父元素样式 */
.parent {
text-align: center;
}
/* 子行内元素不需要额外设置 */
.child {
/* 行内元素默认宽度由内容决定，无需设置宽度 */
}
2. 块级元素水平居中
对于宽度确定的块级元素，给元素自身设置margin: 0 auto即可实现水平居中，该方式要求元素必须设置明确的宽度值。
/* 块级子元素样式 */
.child {
width: 200px; /* 必须设置宽度，否则会占满父容器无法居中 */
margin: 0 auto;
}
3. 多个块级元素水平居中
如果需要让多个块级元素在同一行水平居中，可以将子元素设置为行内块元素，再给父元素设置text-align: center。
.parent {
text-align: center;
}
.child {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 10px;
}
二、垂直居中实现技巧
1. 单行行内元素垂直居中
对于单行文本或者单行行内元素，给父元素设置相等的height和line-height即可实现垂直居中。
.parent {
height: 100px;
line-height: 100px; /* 和height值保持一致 */
}
.child {
/* 单行行内元素无需额外设置 */
}
2. 未知高度元素垂直居中
如果子元素高度不确定，可以使用transform配合绝对定位实现垂直居中，该方式不需要提前知道元素的高度。
.parent {
position: relative;
height: 300px; /* 父容器需要有明确高度 */
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%); /* 向上移动自身高度的50% */
}
三、水平垂直同时居中技巧
1. Flexbox布局实现
Flexbox是目前最推荐的居中方案，代码简洁且适配性好，只需要给父元素设置display: flex配合对齐属性即可。
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 300px; /* 父容器需要设置高度，否则垂直居中无效果 */
}
.child {
width: 200px;
height: 200px;
}
2. Grid布局实现
Grid布局是更强大的二维布局方案，实现居中只需要给父元素设置display: grid和place-items: center即可。
.parent {
display: grid;
place-items: center; /* 同时设置水平和垂直居中 */
height: 300px;
}
.child {
width: 200px;
height: 200px;
}
3. 绝对定位+transform实现
该方式不需要父元素设置flex或grid，兼容旧版本浏览器，通过绝对定位配合transform位移实现居中。
.parent {
position: relative;
height: 300px;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 向左向上各移动自身宽高的50% */
}
四、不同场景方案选择建议
可以根据实际场景选择合适的居中方案，以下是常见场景的推荐：
- 简单行内元素水平居中：优先使用
text-align: center - 单个块级元素水平居中：优先使用
margin: 0 auto - 现代浏览器项目中的任意居中需求：优先使用Flexbox方案
- 需要二维布局且同时有居中需求：优先使用Grid方案
- 需要兼容旧版本浏览器：使用绝对定位+transform方案