如何让我的 div 居中 - CSS

在 web 开发中，我们经常需要让某个元素居中显示。本文将介绍如何使用 CSS 让 div 元素居中显示。

水平居中

要让 div 元素水平居中，可以使用以下两种方法：

1. display 和 margin

div {
  display: block;
  margin: 0 auto;
}

这个方法是最常用的方法之一。margin: 0 auto 可以把 div 元素根据页面宽度居中显示。

2. text-align

div {
  text-align: center;
}
div > * {
  display: inline-block;
  text-align: left;
}

这个方法也是常用的方法之一。text-align: center 可以让 div 元素内的行内元素（如文字、图片等）居中显示。但是使用这个方法时要注意，如果 div 内有块状元素（如 div），会导致这些块状元素也居中显示。这时可以给这些元素加上 text-align: left，让它们左对齐。

垂直居中

要让 div 元素垂直居中，可以使用以下两种方法：

1. display 和 vertical-align

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

这个方法使用了 display: table 和 display: table-cell 属性，把 div 元素以表格的形式呈现出来，再使用 vertical-align: middle 把 div 元素垂直居中显示。

2. position 和 transform

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

这个方法使用了 position: absolute 和 transform: translate(-50%, -50%) 属性，让 div 元素以绝对定位的方式居中显示。

结论

本文介绍了如何使用 CSS 让 div 元素水平和垂直居中显示。以上方法各有优缺点，在实际开发中可以根据需求和具体情况选择合适的方法。