如何使 div 元素居中 - CSS

在网页开发中，经常需要把某个 div 元素居中显示，本文就来介绍一些实现方法。

水平居中

margin 属性法

将 div 元素的左右外边距都设置为 auto，可以使它水平居中。

div {
  margin: 0 auto;
}

flex 布局法

使用 flex 布局中的 justify-content 属性，将值设置为 center，可以使 div 元素水平居中。

.container {
  display: flex;
  justify-content: center;
}

.container div {
  /* div 元素需要设置宽度 */
  width: 200px;
}

垂直居中

line-height 属性法

将 div 元素的高度和行高相等，并将行高设置成与父容器的高度相等，可以使其垂直居中。

.container {
  height: 200px;
  /* 让文字垂直居中 */
  display: flex;
  align-items: center;
}

.container div {
  /* div 元素需要设置宽度 */
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

transform 属性法

使用 transform 属性，将 div 元素向下平移 50% 的高度，然后再将其自身向上平移 50% 的高度，可以使其垂直居中。

.container {
  height: 200px;
  /* 给父容器设置 position: relative */
  position: relative;
}

.container div {
  /* div 元素需要设置宽度和高度 */
  width: 200px;
  height: 200px;
  /* 通过 transform 属性实现垂直居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

水平垂直居中

flex 布局法

使用 flex 布局中的 align-items 和 justify-content 属性，将值都设置为 center，可以使 div 元素水平垂直居中。

.container {
  /* 父容器需要设置高度 */
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container div {
  /* div 元素需要设置宽度和高度 */
  width: 200px;
  height: 200px;
}

transform 属性法

使用 transform 属性，将 div 元素向下平移 50% 的高度，再向右平移 50% 的宽度，可以使其水平垂直居中。

.container {
  height: 200px;
  /* 给父容器设置 position: relative */
  position: relative;
}

.container div {
  /* div 元素需要设置宽度和高度 */
  width: 200px;
  height: 200px;
  /* 通过 transform 属性实现水平垂直居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以上就是几种常见的 div 元素居中方式，可以根据需求选择适合的方法。