html 如何让文本垂直居中？让一段文字在整个页面里上下左右都居中

记得有一次，我在做网页设计的时候，面对着满屏的乱码，心里那个急啊。
页面布局不对，文字东倒西歪，就像没穿衣服的模特，尴尬得要命。
那时候我就想着，要是能一键搞定这乱糟糟的布局就好了。
后来，我用了Dreamweaver，开始学习HTML和CSS，一步步把那个页面整得整整齐齐，文字也居中了对齐。
那时候，我看着页面，心里那个美啊，就像刚买的新衣服。
可是，等等，还有个事，我突然想到，如果当时有人能告诉我一些小技巧，我可能就不会那么费劲了。
比如，直接用CSS的text-align和line-height属性，就能轻松搞定文字的对齐问题。
不过，现在回想起来，那些曲折的经历，也是成长的痕迹吧。

html的盒子怎么居中

水平居中： margin: 0 auto; / 宽1 00px，容器宽2 00px，2 01 9 年普遍使用 / text-align: center; / 容器内inline-block元素居中，2 01 8 年常见 /
垂直居中： margin: auto; / 宽1 00px，容器高2 00px，2 02 0年主流 / position: absolute; top: 5 0%; transform: translateY(-5 0%); / 2 01 7 年方案 /
水平和垂直居中： flexbox: .container { display: flex; justify-content: center; align-items: center; } / 2 01 9 年方案 / grid: .container { display: grid; justify-content: center; align-items: center; } / 2 02 1 年方案 /
别用text-align+inline-block做垂直居中，2 02 2 年已淘汰。
记得设置容器高度，否则flex和grid垂直居中无效。

html5中img怎么居中_HTML5图片居中Flex/Grid方案

Flexbox和Grid都能轻松实现图片居中。
Flexbox适合单个元素或多个元素对齐，Grid适合复杂布局。

Flexbox做法： 1 . 父容器设display:flex 2 . justify-content:center水平居中 3 . align-items:center垂直居中 4 . 设定父容器高度 5 . 图片用max-width:1 00%和height:auto
Grid做法： 1 . 父容器设display:grid 2 . place-items:center一键居中 3 . 同样要设父容器高度 4 . 图片用max-width:1 00%和height:auto
Flexbox适合：
父容器已是弹性布局
要对齐多个子元素
Grid适合：
整体用网格布局
单元素居中要代码简洁
共同优点：
不依赖图片尺寸
响应式友好
兼容主流浏览器
注意：
父容器必须设高度
嵌套容器都要设对齐
IE9 以下要特殊处理
你自己看