CSS 垂直水平居中全攻略：Flex、Grid 等多种方法大揭秘

在 CSS 中，实现元素垂直水平居中常见的方法有多种，以下是一些常见的方式： 1. 使用 Flex 布局： ```css .parent { display: flex; justify-content: center; align-items: center; } ``` 2. 使用 Grid 布局： ```css .parent { display: grid; justify-items: center; align-items: center; } ``` 3. 对于已知宽高的元素，可以使用绝对定位和负边距： ```css .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; } ``` 4. 对于行内元素（如文本），可以设置 `line-height` 等于父元素的高度来实现垂直居中，再通过 `text-align: center` 实现水平居中： ```css .parent { height: 200px; line-height: 200px; text-align: center; } ``` 这些是实现垂直水平居中的常见方法，您可以根据具体的场景选择合适的方式。 ######[AI写代码神器 | 297点数解答 | 2024-10-23 17:54:45]