如何将div居中4

居中 div 长期以来一直是软件开发人员中的一个梗，尤其是像我这样的后端开发人员，他们经常与包括 CSS 在内的前端技术作斗争。

好消息是，由于新的align-content CSS 属性，斗争终于结束了。当然，该属性仅处理垂直对齐。稍后会详细介绍。

历史上是如何完成的

在引入align-content之前，我们通常必须使用CSS Grid或Flexbox来实现垂直对齐。

网格示例：

<div style="display: grid; align-content: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

弹性盒示例：

<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

justify-content 属性用于 Grid 和 Flexbox 中 div 内容的水平对齐。对于常规 div，我们可以简单地使用 text-align，如下所示：

<div style="text-align: center; height: 100vh;">
    Hello World!
</div>

2024 年如何完成

随着align-content的引入，不再需要依赖Grid和Flexbox，它们都有一些缺点。我们可以通过以下方式更干净地实现相同的结果：

<div style="align-content: center; height: 100vh;">
    Hello World!
</div>

如前所述，这仅处理垂直对齐。对于水平对齐，我们仍然可以结合使用可靠的 text-align 属性和align-content。

<div style="align-content: center; text-align: center; height: 100vh;">
    Hello World!
</div>

请注意，最低支持的浏览器版本为 Chrome 123、Firefox 125 和 Safari 17.4

资源

• MDN 网络文档：align-content
• 构建您自己的：CSS 垂直中心

特色图片学分

• ChatGPT 生成的特色图像

以上是如何将div居中4的详细内容。更多信息请关注PHP中文网其他相关文章！