在 CSS 中使 div 居中的 5 种方法
在 CSS 中使 div 居中的 5 种方法
5 ways to center a div in CSS
你觉得很难在 CSS 中将 div 居中吗？你并不孤单，我的兄弟，许多开发人员有时会在将 div 居中时感到困惑，包括我自己。
如果您知道如何使 div 居中，那么您仍然需要阅读这篇文章，因为我将向您展示可用于使 div 居中的 5 种不同方法。
如果你正在准备下一次面试，面试官问你这些不同的方法怎么办？所以最好把这篇文章读到最后。
1. 使用弹性盒：
灵活的框布局模块可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
您可以使用 Flexbox 使 div 居中。以下是代码片段：
center div using flexbox
2.使用CSS网格布局：
CSS Grid 是 CSS 中使用的另一种布局系统。您可以使用以下代码使用 Grid 使 div 居中：
center div using CSS grid
3、CSS定位：
你也可以使用老的Positioning方法在CSS中让一个div居中，很多开发者之前可能用过这种方法：
center div using CSS positioning
4. 有边距的弹性：
我们还可以结合 CSS 边距和 flex 布局来使 div 居中，如下所示：
Center a div using flexbox and CSS margins
5. 带有 CSS 边距的网格：
最后但并非最不重要的一点是，Grid 还可以与 CSS Margins 结合使用以使 div 居中：
Center a div using CSS Grid and Margins
以上哪一种方法你用得最多？评论您的答案并与您的朋友开发人员分享这篇文章。
有关更多有趣和信息丰富的文章，请关注我或通过以下方式支持我 给我买咖啡 .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
