掌握CSS居中需根据元素类型选择方法：块级元素设width和margin:0 auto实现水平居中；行内或行内块元素在父容器用text-align:center；单行文本通过line-height等于容器高度垂直居中；推荐使用Flex布局，通过display:flex、justify-content:center和align-items:center实现任意元素水平垂直居中，适用性广且灵活。
在初级项目中，用 CSS 居中元素是常见需求。掌握几种简单有效的方法，能快速解决大多数居中问题。关键是根据元素类型（行内、块级、弹性布局等）选择合适方式。
水平居中块级元素
对块级元素（如 div、p），设置左右外边距为 auto 可实现水平居中。
需要固定宽度或最大宽度，否则浏览器无法计算居中位置。
示例：居中内容
.box {
width: 300px;
margin: 0 auto;
background: #eee;
}
水平居中行内或行内块元素
对文本、图片、按钮等行内元素，可在父容器使用 text-align: center。
立即学习“前端免费学习笔记（深入）”；
这种方法适用于多个小元素并排居中。
图标1
图标2
.container {
text-align: center;
}
.container span {
display: inline-block;
}
垂直居中单行文本
对于按钮或导航项中的单行文字，设置 line-height 等于容器高度即可。
简单高效，但只适用于已知高度的单行内容。
示例：.btn {
height: 40px;
line-height: 40px;
padding: 0 16px;
}
用 Flex 实现完全居中
现代布局推荐使用 Flexbox，能轻松实现水平垂直同时居中。
适用范围广，无论是文字、图片还是复杂结构都支持。
示例：居中内容
.flex-center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
基本上就这些。初学阶段掌握 margin: auto、text-align、line-height 和 Flex 布局，就能应对大部分居中场景。Flex 方法最灵活，建议优先尝试。不复杂但容易忽略细节，比如块级元素要设宽，行内元素注意 display 类型。
