无论是单排还是多排，css行内元素垂直水平居中方式全都有

css水平垂直居中

无论是前端还是后端，抑或是UI设计，熟悉布局的实现，对我们来说太重要了。布局，不仅仅关系到前端页面呈现效果，还关系到页面SEO。水平和垂直居中是最常用的布局方式之一。本文我们将介绍实现水平和垂直居中的各种方法，它们的优缺点。

1. 水平居中

水平居中有很多种方法。如果您只处理一行文本，最简单的方法是使用 text-align 属性。您可以将 text-align 设置为 center。这将使文本水平居中。

p {
  text-align: center;
}

但是，此方法只能用于单行文本。如果您想水平居中多行文本，则需要使用不同的方法。

另一种方法是使用 margin 属性。您可以将 margin-left 和 margin-right 设置为 auto。这将使元素在水平方向上居中。

div {
  margin: 0 auto;
}

需要注意的是，此方法不适用于IE8及更早版本。

还有一种方法是使用 flexbox。您可以将元素的 display 属性设置为 flex。然后，您可以将 justify-content 属性设置为 center。这将使元素在水平方向上居中。

div {
  display: flex;
  justify-content: center;
}

最后，您还可以使用 absolute 定位。您可以将元素的 position 属性设置为 absolute。然后，您可以使用 left 和 right 属性将元素水平居中。

div {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

2. 垂直居中

垂直居中也有很多种方法。最简单的方法是使用 line-height 属性。您可以将 line-height 设置为一个值，该值等于或大于元素的高度。这将使元素在垂直方向上居中。

div {
  line-height: 200px;
}

但是，此方法只能用于固定高度的元素。如果您想垂直居中一个高度可变的元素，则需要使用不同的方法。

另一种方法是使用 margin 属性。您可以将 margin-top 和 margin-bottom 设置为 auto。这将使元素在垂直方向上居中。

div {
  margin: auto 0;
}

需要注意的是，此方法不适用于IE8及更早版本。

还有一种方法是使用 flexbox。您可以将元素的 display 属性设置为 flex。然后，您可以将 align-items 属性设置为 center。这将使元素在垂直方向上居中。

div {
  display: flex;
  align-items: center;
}

最后，您还可以使用 absolute 定位。您可以将元素的 position 属性设置为 absolute。然后，您可以使用 top 和 bottom 属性将元素垂直居中。

div {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

总结

在本文中，我们讨论了如何在 CSS 中垂直和水平居中行内元素。我们研究了不同的方法，包括使用文本对齐、弹性盒模型和绝对定位。我们详细了解了每种方法的优点和缺点，并提供了一些技巧和最佳实践来帮助您创建美观且居中的设计。