如何使 div 居中 - CSS

在Web开发中，许多时候需要将一个 div（或其它元素）居中显示。通过 CSS，可以轻松实现这一目标。以下是几种居中显示 div 的方法：

水平居中

使用 text-align 属性居中

可以将 div 的 text-align 属性设置为 center 来使其水平居中:

div {
  text-align: center;
}

使用 margin 属性居中

将 div 的 margin 属性设置为 "0 auto"，即可实现水平居中:

div {
  margin: 0 auto;
}

垂直居中

使用 display 属性和 vertical-align 属性

可以将 div 的 display 属性设置为 table-cell，然后设置其 vertical-align 属性为 middle，即可实现垂直居中：

div {
  display: table-cell;
  vertical-align: middle;
}

使用 position 属性和 top, bottom 属性

将 div 的 position 属性设置为 absolute，然后设置其 top 和 bottom 属性为 0，即可实现垂直居中：

.parent {
  position: relative;
}

div {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

水平垂直居中

使用 position 属性和 top, bottom, left, right 属性

将 div 的 position 属性设置为 absolute，然后设置其 top, bottom, left, right 属性为 0，即可实现水平垂直居中：

.parent {
  position: relative;
}

div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 50px;
  width: 50px;
}

注意：可根据实际情况调整 div 的高和宽大小。

以上是几种常见的 div 居中的方式，根据实际情况选择适合的方法进行实现即可。