--- theme: cyanosis --- 说明：本篇文章只是总结一些方法，例子用到的各个元素属性不做解释，详情请看MDN文档，非常的详尽，例子在chrome浏览器下完全好使，IE这个渣渣就不测了，附上链接：https://developer.mozilla.org/zh-CN/ ## 文本垂直居中 ```html

文本垂直居中

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/afcb97e60c4f4a32877fc9a925816eb5~tplv-k3u1fbpfcp-watermark.image?) ## 元素垂直居中 ### 1.绝对性定位利用 calc 计算偏移量使用绝对性定位，已知盒子自身宽高，利用 calc 计算偏移量进行定位📌 ```html

元素垂直居中

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86e23e9dfb36495b988e28fab0f69a2b~tplv-k3u1fbpfcp-watermark.image?) ### 2.绝对定位利用 margin:auto 属性使用绝对定位，利用 margin:auto 属性，对已知宽高的盒子进行自动偏移定位📌 ```html

margin: auto;元素垂直居中

``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/381342739c4044efaf6a3f4e7af0e9a0~tplv-k3u1fbpfcp-watermark.image?) ### 3.绝对定位利用 margin 负值属性使用绝对定位，利用 margin 负值属性，对已知宽高的盒子进行计算偏移量进行定位📌 ```html

margin: -100px;元素垂直居中

``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fdf1b1c30cc844d48b19b3c430ce4b04~tplv-k3u1fbpfcp-watermark.image?) ### 4.绝对定位利用 transform 属性使用绝对定位，利用 transform 属性，对未知宽高的盒子进行自动偏移定位📌 ```html

利用 transform 进行垂直居中

``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/83ced57ffffe474e962bed9fd9464596~tplv-k3u1fbpfcp-watermark.image?) ### 5.Flex布局使用Flex布局，利用 `align-items: center;` 与 `justify-content: center; ` 属性，对未知宽高的盒子进行自动偏移定位，`父元素需要设置高度`📌 ```html

利用 flex 布局进行水平垂直居中

``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a82aa25499d4bc5994210256db2e819~tplv-k3u1fbpfcp-watermark.image?) ### 6.table-cell 布局使用 table-cell 布局，利用 `display: table-cell;` 、 `vertical-align: middle; ` 与 `text-align: center;` 属性，对未知宽高的盒子进行自动偏移定位，`父元素需要设置宽高`📌，适合有父元素元素的定位 ```html

利用 table-cell 进行水平垂直居中

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c2f80adac5048a3967848c7a490bb2c~tplv-k3u1fbpfcp-watermark.image?) ## 总结：以上介绍了元素垂直居中的几种方法，各不相同，具体用什么方法，看个人习惯和工作需要，可以自己动手尝试，加深记忆，希望可以帮助到你! 本文出现的错误，请大佬们及时指正，人非圣贤孰能无过，如有更好的方法，也请留言，我及时更新，哈哈！