如何使内联块元素居中 - CSS

有时候我们需要将内联块元素（例如按钮、链接等）水平居中，这里提供几种方法：

1. text-align

这是最简单的方法，将父元素的text-align属性设置为center即可。

.parent {
  text-align: center;
}

2. margin

将内联块元素的左右margin都设置为auto，它就会水平居中了。这同样需要父元素有一定的宽度。

.child {
  display: inline-block;
  margin: 0 auto;
}

3. Flexbox

Flexbox是CSS3新增的布局方式，它可以让我们更方便的控制元素的排列方式。使用Flexbox可以轻松解决居中的问题。

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

4. Grid

和Flexbox一样，Grid也是CSS3新增的布局方式，但它可以更加灵活的控制元素的排列方式。这里提供一种Grid实现内联块元素水平居中的方法。

.parent {
  display: grid;
  justify-items: center;
}

以上就是几种常用的内联块元素居中的方法，根据实际情况选择最适合的即可。