CSS 如何居中显示 display inline-block

在本文中，我们将介绍如何使用CSS将display为inline-block的元素居中显示。display为inline-block的元素特点是既可以像行内元素一样排列在一行中，又可以设置宽度和高度。但是，它的居中显示稍微复杂一些，因为它不是块级元素，不能像块级元素一样使用margin: 0 auto;来实现居中。

阅读更多：CSS 教程

margin: auto;

在CSS中，我们可以使用margin: auto;来实现水平居中。但是这个方法只对display为block的元素起作用，并不能对display为inline-block的元素起作用。而且，垂直方向上也无法实现居中。

text-align: center;

如果父级元素的宽度固定，而且只有一个display为inline-block的子元素需要居中显示，我们可以使用text-align: center;来实现水平居中。这个方法的原理是将子元素的文本内容居中对齐，从而实现子元素的居中显示。但是需要注意，这种方法只能实现水平居中，无法实现垂直居中。

flexbox

CSS的flexbox布局也可以用于居中显示display为inline-block的元素。通过在父元素上使用display: flex;以及align-items: center;和justify-content: center;属性，我们可以实现水平和垂直方向上的居中显示。这种方法对于多个display为inline-block的子元素也同样适用。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

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

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

上面的例子中，我们使用了flexbox布局，并通过align-items: center;和justify-content: center;来将子元素居中显示。

transform: translate(-50%, -50%);

另一种实现display为inline-block的元素居中显示的方法是使用transform属性。通过将元素的位置平移至父元素的中心位置，我们可以实现元素的水平和垂直方向上的居中显示。

<div class="container">
  <div class="item">Center</div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #f2f2f2;
}

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

上面的例子中，我们使用了transform属性将子元素平移到父元素的中心位置，实现了居中显示。

总结

通过本文，我们学习了几种居中显示display为inline-block的元素的方法。包括使用margin: auto;、text-align: center;、flexbox布局以及transform属性。根据具体情况选择合适的方法来实现居中显示是很重要的，希望本文对您在CSS中使用display inline-block元素进行居中显示有所帮助。