前言

css水平垂直居中一直是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（特想找个地洞钻进去）。现在都2022年了，这些技巧现在已经不是技巧了吧，只是好记性不如烂笔头，还是乖乖记下来吧，得把它玩透才行！

注：文中例子没写明html代码时，使用的是下面结构：

当CSS垂直居中让你怀疑人生：5个方案从青铜到王者的进化史

凌晨三点，你的鼠标在IDE和浏览器之间疯狂切换，那个该死的div像个叛逆期的teenager一样拒绝居中。你开始怀疑人生：为什么水平居中只要margin:0 auto，垂直居中却要翻遍MDN？今天我们就来扒一扒那些年让前端er秃头的垂直居中方案，从石器时代的表格布局到现代CSS的黑科技，总有一款能治好你的"居中强迫症"。

今天学习下css中字体相关的设置样式，主要通用的几个样式有包括字体类型（font-family）、字体大小（font-size）、字体粗细（font-weight）、字体风格（font-style）、字体变体（font-variant）、行高（line-height）等。下面是一个简单的HTML和CSS示例，展示了如何使用这些属性来设置文本样式。

高科技...使用情景，父级宽度固定，自己宽度溢出时，父级显示横向滚动轴~~
自己宽度可以设置为width