css中怎样使整个页面居中显示

在 CSS 中，我们想要让整个页面居中显示，可以使用以下三种方式：

/* 第一种方式：使用 margin 属性 */
body {
    margin: 0 auto;
}

/* 第二种方式：使用 flex 属性 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 第三种方式：使用 grid 属性 */
body {
    display: grid;
    place-items: center;
} 

其中，第一种方式是最基础的居中方式，我们只需要将 body 的 margin 设置为 0 auto 即可。这种方式适用于绝大多数情况，但不适用于一些特殊情况，例如当页面内容超出浏览器宽度时，页面会出现横向滚动条，此时使用 margin 居中方式不会让页面居中，需要使用其他方式。

第二种方式是使用 flex 属性。我们将 body 的 display 属性设为 flex，然后使用 justify-content 和 align-items 属性控制页面在水平和垂直方向上的居中方式。这种方式适用于需求较为简单的页面。

第三种方式是使用 grid 属性。我们将 body 的 display 属性设为 grid，然后使用 place-items 属性控制页面在水平和垂直方向上的居中方式。与 flex 方式相比，grid 方式更加灵活，可以使用 grid-template-rows 和 grid-template-columns 等属性控制布局。