CSS margin:auto和justify-content/align-items center的区别

在本文中，我们将介绍CSS中margin:auto属性和justify-content/align-items center属性之间的区别。

阅读更多：CSS 教程

margin:auto

margin:auto属性用于设置元素的外边距，使元素在父元素中水平垂直居中。当将margin:auto应用于一个元素时，浏览器会自动计算元素的外边距，使其水平和垂直方向上相等，并将元素居中显示。

下面是一个示例，展示了如何使用margin:auto将一个元素居中显示：

<div class="container">
  <div class="box">Hello, World!</div>
</div>

<style>
.container {
  width: 300px;
  height: 200px;
  background-color: lightgray;
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  background-color: coral;
  margin: auto;
}
</style>

在上面的示例中，我们在一个名为container的div元素中创建了一个名为box的子元素。通过设置box元素的margin:auto属性，它被水平和垂直居中显示在父元素中。

justify-content/align-items center

justify-content和align-items是flexbox布局中的两个属性，用于定义元素在父容器中的对齐方式。justify-content属性用于水平对齐，align-items属性用于垂直对齐。当将这两个属性的值都设置为center时，元素将在父容器中水平垂直居中显示。

下面是一个示例，展示了如何使用justify-content和align-items属性将一个元素居中显示：

<div class="container">
  <div class="box">Hello, World!</div>
</div>

<style>
.container {
  width: 300px;
  height: 200px;
  background-color: lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: coral;
}
</style>

在上面的示例中，我们在一个名为container的div元素中创建了一个名为box的子元素。通过设置container元素的justify-content和align-items属性为center，box元素被水平和垂直居中显示在父元素中。