css实现元素水平垂直居中常见的两种方式实例详

1. 使用display和text-align属性实现水平居中

要实现水平居中，可以使用display属性将元素设置为块级元素，在父容器中使用text-align属性将其水平居中。

代码示例：

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

在上述示例代码中，.parent表示父容器，.child表示要居中的子元素。通过设置.parent的text-align属性为center，可以使其中的所有子元素在水平方向上居中。同时，将.child设置为块级元素，使其独占一行。

需要注意的是，该方法只适用于已知宽度的元素。如果元素的宽度是自适应的，该方法会失效。

2. 使用flexbox实现水平垂直居中

Flexbox是CSS3中新增的一种布局模式，它可以方便地实现元素的水平垂直居中。通过设置父容器的display属性为flex，以及使用align-items和justify-content属性，可以实现水平垂直居中。

代码示例：

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

在上述示例代码中，.parent表示父容器。通过设置display属性为flex，可以使其成为一个Flex容器。然后，使用align-items属性将子元素在垂直方向上居中，使用justify-content属性将子元素在水平方向上居中。

值得注意的是，这种方法兼容性较好，但需要注意浏览器对Flexbox的支持情况。在一些旧版本的浏览器中，可能需要添加浏览器特定的前缀。

总结

通过本文的介绍，我们了解到了两种常见的实现元素水平垂直居中的方式。使用display和text-align属性实现水平居中适用于已知宽度的元素，而使用flexbox可以方便地实现水平垂直居中，适用于自适应宽度的元素。

无论是哪种方式，都可以根据实际需求选择合适的方法来实现元素的居中效果。在实际应用中，可以根据布局和设计要求选择最合适的方式。