如何居中 div - CSS

在网页设计中，实现一个居中的 div 经常会遇到。下面介绍几种实现方法。

方法一：text-align 和 line-height

将 div 的文字水平居中，再将 div 的高度设置为等于行高。这样就能实现 div 的垂直居中。

.center {
  text-align: center;
  line-height: 100px;
  height: 100px; /* 可灵活设置高度 */
}

方法二：Flex 布局

使用 Flex 布局可以很方便地实现居中。

.parent {
  display: flex;
  justify-content: center; /* 横向居中 */
  align-items: center; /* 纵向居中 */
}

方法三：position + transform

使用 position 和 transform 可以实现 div 的绝对居中。

.parent {
  position: relative;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法四：grid 布局

使用 grid 布局也可以很简单地实现居中。

.parent {
  display: grid;
  place-items: center;
}

以上几种方法都可以实现 div 的居中，可根据具体需求选择。

参考链接：CSS 居中的几种写法