HTML主体内容居中显示

在HTML中让主体内容居中显示，有几种常见的方法：

1. **CSS Flexbox**:
使用`display: flex; justify-content: center; align-items: center;` 属性可以轻松地使容器内的内容水平和垂直居中。将这些样式应用到包含元素的容器上，例如 `<div class="container">...</div>`。

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 或者指定一个具体的高度 */
}
</style>

<div class="container">
  <!-- 这里是你的主体内容 -->
</div>

2. **CSS Grid**:
如果你的页面结构更倾向于网格布局，可以使用 `grid-template-columns` 和 `justify-items`，`align-items` 属性。

<style>
.container {
  display: grid;
  place-items: center; /* 同样实现了居中 */
  height: 100%;
}
</style>

<div class="container">
  <!-- 主体内容 -->
</div>

3. **传统的浮动和margin**:
可以利用`<div style="text-align:center;">` 对于文本居中，配合绝对定位或者设置`margin: auto` 来让块级元素居中。

<div style="width: 50%; margin: 0 auto;">
  <!-- 这里是你的主体内容 -->
</div>