一个 div 里的文字死活不居中，八成是把几种居中混着用了。css 文字居中要分场景：水平居中、垂直居中、整个盒子居中，各有各的属性，混着写就互相打架。
水平居中：text-align
.box { text-align: center; }写在父元素上，让里面的行内内容——文字、span、图片——水平居中。它管的是内容不是盒子自己，块级子元素不会跟着动。
单行文字垂直居中：line-height
.btn { height: 48px; line-height: 48px; }行高等于高度，单行文字自然垂直居中，按钮、导航栏常用。多行文字用这招会错位，多行场景换 flex。
水平垂直一起搞：flex
.wrap { display: flex; justify-content: center; align-items: center; }justify-content 管主轴（默认水平），align-items 管交叉轴，单行多行、文字图片都适用，现在的主流写法，兼容性也没问题。
盒子自身水平居中：margin
.card { width: 300px; margin: 0 auto; }前提是元素有固定宽度且是块级，左右 margin 设 auto 就平分剩余空间。没宽度的话 auto 算不出值，等于没设。
老项目里还能见到绝对定位加 translate 的写法，效果一样，现在多数被 flex 替代了。选择逻辑：只动文字水平位置用 text-align；按钮、导航里的单行字用 line-height；弹窗、卡片内容居中直接 flex。记不住就先写 flex，css 文字居中的大多数场景它都能覆盖，再按需精简。