html 本身标签没有专门的居中指令，居中效果是依靠 css 来实现，html 只负责搭建页面元素结构，居中分为水平居中垂直居中，还有水平垂直同时居中三种需求，常见需要居中的元素包含文字图片 div 盒子表格按钮表单输入框。很多新手写代码之后居中失效，核心原因就是没有分清元素类型，块级元素行内元素弹性布局的居中写法不一样，不同场景要选择对应的 css 属性，不能一套代码全部通用。现在新项目优先使用现代 css 方案，也就是 margin auto flex 布局，旧的 align center 属性已经属于废弃写法，只在维护老页面的时候才会见到，不推荐继续在新代码里面使用。
居中方案分类对照表
| 居中类型 | 适用元素 | 核心 css 属性 |
|---|---|---|
| 文字水平居中 | p h1 span 文字 | text-align center |
| 块级盒子水平居中 | div table | margin 0 auto |
| 子元素水平居中 | 父容器里面的 div 图片 | display flex justify content center |
| 子元素垂直居中 | 父容器里面的子元素 | display flex align items center |
| 水平垂直双居中 | 弹窗卡片盒子 | flex 同时写 justify content center 和 align items center |
| 绝对定位元素居中 | 定位弹窗 | top 50% left 50% 搭配 transform translate |
文字水平居中
如果只是文字内容居中，直接给文字所在标签设置 text align center，这个是最简单的写法，p 标签标题标签都可以直接使用。
示例写法
p {
text-align: center;
}
注意这个属性是让元素内部文字居中，不是把这个 p 盒子本身在页面居中，这是新手最容易混淆的一点。
块级元素水平居中
div 这类块级元素想要在父容器横向居中，使用 margin 0 auto，前提条件是这个块级元素必须设置明确宽度，如果没有宽度，元素默认占满父容器，没有剩余空间，margin auto 就不会生效。
示例写法
.box {
width: 500px;
margin: 0 auto;
}
flex 弹性布局居中
flex 是现在最推荐的现代方案，可以一次性实现水平垂直同时居中，给父元素开启 display flex，然后搭配两个属性，justify content 控制水平方向，align items 控制垂直方向。
示例写法
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
这里重点，父容器一定要设置高度，不然垂直居中没有参照空间，子元素不管是 div 图片按钮都可以直接居中，这个方案现在广泛用于卡片弹窗导航栏。
绝对定位居中方案
适合弹窗悬浮元素，元素已经设置 position absolute，就可以使用 top 50% left 50%，再配合 transform translate 负偏移，实现水平垂直居中。
示例写法
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate (-50%, -50%);
}
这个方案优势是不受普通文档流限制，缺点是需要理解定位和 transform，对新手门槛稍高。
行内元素居中
图片 a 标签 span 这类行内元素，如果想要水平居中，最简单办法是给它的父元素设置 text align center，行内元素会跟随父元素文字对齐方式实现居中，不需要给行内元素本身写 margin auto。
居中失效排查清单
1 块级元素写 margin 0 auto，但是没有设置宽度，导致 html 怎么居中一直不生效
2 flex 父容器没有设置高度，垂直居中失败
3 元素设置浮动 float，普通 margin auto 失效，需要改用 flex 或者定位方案
4 css 样式优先级冲突，别的样式覆盖了你写的居中代码
5 元素是 inline 行内元素，错误使用 margin 0 auto，行内元素这个属性无效
6 父容器宽度是 100%，子元素宽度等于父容器宽度，没有多余空间实现居中
完整示例代码
html居中示例
这段文字水平居中
这个div盒子水平居中
flex实现水平垂直居中
【常见问题】
问题 1 html 怎么居中 div 盒子
回答 1 html 怎么居中 div 盒子优先使用 margin 0 auto，前提给 div 设置固定宽度，如果需要垂直方向同时居中，推荐父容器使用 flex 布局实现 html 怎么居中。
问题 2 html 怎么居中文字和居中盒子是同一种代码吗
回答 2 html 怎么居中文字是使用 text align center，html 怎么居中盒子是 margin auto 或者 flex，二者不是同一种属性，不能混用。
问题 3 html 怎么居中图片
回答 3 html 怎么居中图片，可以给图片父元素设置 text align center，或者父容器开启 flex 布局，都可以实现 html 怎么居中图片。
问题 4 html 怎么居中为什么 margin 0 auto 没有效果
回答 4 html 怎么居中的时候 margin 0 auto 失效，大多是元素没有设置宽度，元素默认撑满父容器，补充宽度之后 html 怎么居中就可以正常生效。
【免责申明】
本文内容基于 html 和 css 公开规范整理，仅用于学习 html 怎么居中相关知识，不同浏览器对 css 新特性兼容情况存在差异，实际项目建议多浏览器测试，本文不替代 W3C 官方标准文档。