一、页设文本居中

内联元素 ：直接设置 `text-align: center；`（适用于单个文本或内联元素）。计制居中

块级元素

设置父容器 `display: table；`，作网站定制页整至子元素 `margin: 0 auto；`（适用于定宽块状元素）；

使用 `line-height` 等于父容器高度（仅适用于单行文本）。面调

二、页设块状元素居中

外边距居中：

为元素设置 `margin: 0 auto；`（需配合定宽父容器）。计制居中

Flexbox布局

容器设置为 `display: flex；`，作网站定制页整至子元素 `justify-content: center； align-items: center；`（兼容性较好）。面调

Grid布局

容器 `display: grid；`，页设设置 `justify-content: center；`（现代浏览器支持）。计制居中

绝对定位

元素 `position: absolute；`，作网站定制页整至`top: 50%； margin-top: -50%；`（需设置 `height`）。面调

三、页设整个页面居中

传统表格方法：

在 `` 标签外包裹 `table`，计制居中设置 `width: 100%； margin: 0 auto；`（兼容性较差）。作网站定制页整至

CSS3 Transform：

`transform: translateX（-50%）；`（需配合 `position: relative；`）。

视口单位：

`top: 50vh； transform: translateY（-50%）；`（适用于单栏布局）。

四、响应式设计注意事项

使用 `meta` 标签设置视口：``；

媒体查询调整布局：例如在移动端使用 `flex-direction: column；`。

示例代码（综合使用）

```html

欢迎访问

这是一个居中显示的示例页面。