如何使用块显示居中 - CSS

在 CSS 中，我们可以使用以下两种方式让块级元素居中显示：

使用 text-align 属性

text-align 属性可以让内联元素水平居中，但它同样可以作用在块级元素上，这时元素的直接子元素会水平居中。

下面是示例代码：

.center {
  text-align: center;
}

<div class="center">
  <h1>这是一个标题</h1>
  <p>这是一个段落</p>
</div>

上面的代码将让 .center 元素中的所有内联元素和文本都水平居中。

使用 margin 属性

我们可以使用 margin 属性来控制元素的外边距，从而让元素居中。当我们对一个元素设置垂直外边距和水平外边距都为 auto 时，这个元素就会水平居中。

下面是示例代码：

.center {
  display: block;
  margin: auto;
}

<div class="center">
  <h1>这是一个标题</h1>
  <p>这是一个段落</p>
</div>

上面的代码会让 .center 元素水平居中。

需要注意的是，这种方式只对宽度已经定义的块级元素有效。如果元素没有定义宽度，那么它会占据整个可用宽度，从而无法实现水平居中。

实战示例

下面是一个完整的示例，展示了如何使用 text-align 和 margin 属性来让一个块级元素在页面中水平居中：

.container {
  text-align: center;
}

.center {
  display: block;
  margin: auto;
  max-width: 600px;
  padding: 20px;
  border: 1px solid #ccc;
}

<div class="container">
  <div class="center">
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
  </div>
</div>

在上面的代码中，我们首先使用 text-align 属性让 .container 元素中的所有内联元素和文本都水平居中。接着，我们使用 margin 属性让 .center 元素在页面中水平居中。同时，我们给 .center 元素定义了一个最大宽度，并添加了一些样式来让它看起来更美观。

以上就是使用 CSS 让块级元素水平居中的方法，希望能对你有所帮助！