如何让div居中显示？两种简单方法！

想要让您的 div 元素在网页上居中显示吗？本文将介绍两种常用的 CSS 方法，让您轻松实现水平垂直居中。

方法一：使用 transform 属性

您可以使用以下 CSS 代码，让 div 元素通过 transform 属性居中显示：

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

该方法通过将 div 元素定位到父元素的中心点，然后使用 translate 属性将其向左、向上移动 50%，从而达到居中的效果。

方法二：使用 flexbox 布局

您也可以使用 flexbox 布局，轻松实现 div 元素的居中显示。以下代码示例展示了如何使用 flexbox 布局将 div 元素水平和垂直居中：

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

该方法通过将 div 元素设置为 flex 容器，并使用 justify-content 属性将内容水平居中，使用 align-items 属性将内容垂直居中。

您可以根据实际情况选择合适的方法来实现 div 元素的居中显示。