DEV Community
·
使用CSS居中你的div的七种最快方法
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
本文介绍了七种CSS居中div的方法，包括弹性布局、自动边距、行内块、2D变换、网格布局、表格显示和相对定位加变换。每种方法的优缺点不同，适用于不同的场景。
🎯
关键要点
- 本文介绍了七种CSS居中div的方法。
- 方法1：弹性布局，使用display: flex和justify-content: center进行水平居中，align-items: center进行垂直居中。
- 方法2：自动边距，使用margin: auto，但仅适用于具有定义宽度的块级元素，无法实现垂直居中。
- 方法3：行内块显示，使用text-align: center和inline-block，但不支持垂直居中。
- 方法4：2D变换，使用绝对定位和translate(-50%, -50%)，可以将div居中，但需要定义宽高。
- 方法5：网格布局，使用display: grid和place-items: center，支持多元素居中，但需现代浏览器支持。
- 方法6：表格显示，使用display: table和table-cell，适用于较旧的浏览器。
- 方法7：相对定位加变换，父容器设置为相对定位，子元素使用绝对定位和translate(-50%, -50%)进行居中。
- 每种方法的优缺点不同，适用于不同的场景。
➡️
