如何使 div 居中

在前端开发中，经常需要让 div 元素居中显示。这个问题看似简单，但实际上却有很多种解决方法，本文将介绍几种常用的方式。

水平居中

方法一：使用 text-align 属性

div {
  text-align: center;
}

该方式适用于 div 元素是 inline 或 inline-block 类型。

方法二：使用 margin 属性

div {
  margin: 0 auto;
}

该方式适用于 div 元素是 block 类型。

方法三：使用 flex 布局

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

该方式需要将 div 包裹在一个容器中，适用于 div 元素是 block 类型。

垂直居中

方法一：使用 display 和 margin 属性

.parent {
  display: flex;
  align-items: center;
}

.child {
  margin: 0 auto;
}

该方式需要将 div 包裹在一个容器中，适用于 div 元素是 block 类型。

方法二：使用 position 和 transform 属性

.parent {
  position: relative;
}

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

该方式需要将 div 包裹在一个容器中，适用于 div 元素是 block 类型。

居中总结

以上是一些常用的居中方式，具体选择哪种方式，需要根据具体的情况和需求来决定。除此之外，还有一些其他的方式，比如使用表格布局、使用浮动等，读者可以自行了解和尝试。