CSS常见的让元素水平居中显示的方法

当我们需要将一个元素水平居中时，可以通过以下CSS方法来实现：

当我们需要将一个元素水平居中时，可以通过以下CSS方法来实现：

1. 使用text-align属性将文本居中

如果所要居中的元素为内联元素（例如，a、span、img等），可以使用text-align属性将其文本居中。将text-align属性赋值为center即可实现。

.parent {
  text-align: center;
}

.child {
  display: inline-block;
  /* 其他样式 */
}

此时，包含子元素的容器会将内部所有元素的文本水平居中。

2. 使用margin属性将块级元素居中

如果要居中的元素为块级元素（例如div、p、ul等），可以使用margin属性将其水平居中。我们可以为元素指定一个固定的宽度，然后将“左右外边距”的值都设置为“auto”，避免左右两侧的内边距影响居中效果。

.parent {
  width: 80%;
  margin: 0 auto;
}

.child {
  /* 其他样式 */
}

在实际应用中，这种方法经常用于居中一个网页的主体内容或响应式网页中元素宽度自适应。

上述是两种常见实现水平居中的方法，需根据实际情况选择具体方法。