技术背景

在前端开发中，垂直居中文本是一个常见的需求。不同的布局场景和浏览器兼容性要求，需要不同的解决方案。本文将介绍多种使用 CSS 实现文本垂直居中的方法。

新手必看！3分钟学会在Jupyter Notebook里插入图片，不用复杂代码，2种方法就能搞定本地图/网络图，写报告做分析再也不愁啦～

一、准备工作：先放好图片

• 本地图片：把图片和Notebook文件放在同一个文件夹（比如新建"images"文件夹专门放图）

我们前端开发过程中，写css（包括sass, less, stylus这样的预处理器）进行设计稿的样式还原是一项重要的工作，而其中，关于页面布局的部分，又是书写样式代码时候的重点和难点，这篇文章就尽可能的去总结常见的一些页面布局实现方案(并不是全部，布局实现方法太多了)，希望能够对大家有所帮助。

在开始正题之前，有一点要说明：css布局中遇到的一个绕不开的问题就是浏览器兼容性，下面方案会遇到类似transform, flex等的兼容性问题，且由于grid布局兼容性问题，暂不涉及grid布局内容，在不同场景，大家选择合适的布局实现方案即可。