如何使 div 水平和垂直居中

对于 Web 开发者来说，将 div 居中是一项至关重要的技能。今天，我将分享三种水平和垂直居中 div 的方法。

让我们开始吧。

如果您更喜欢视频，请在这里查看：

注意：要使带有 flexbox 或 grid 的 div 居中，您需要将 flexbox 或 grid 添加到该 div 的父级。

#1. 使用 Flexbox

您可以使用 Flex 框将 div 水平和垂直居中，只需 4 行代码。

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#2. 使用网格

使用 grid 使 div 居中比使用 flexbox 容易得多。

div { 
  display: grid;
  place-items: center;
  height: 100vh; 
}

#3. 使用绝对位置：

您也可以使用 CSS 定位将 div 居中。

div {
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);
}

结论

今天就到这里。

如果你喜欢阅读这篇文章，我想你也会喜欢我的时事通讯，我在其中分享我的文章和视频以及其他有用的资源

立即订阅！

您也可以通过 Twitter 与我联系：@coderamrin