页面居中可以通过多种方法实现，以下是几种常见的方法：
水平居中
使用 `margin` 属性
```css
body {
width: 800px；
margin: 0 auto；
}
使用 Flexbox```css.container {
display: flex；
justify-content: center；
}
使用绝对定位
```css
.container {
position: relative；
}
.centered-element {
position: absolute；
top: 50%；
left: 50%；
transform: translate（-50%, -50%）；
}
垂直居中使用 Flexbox```css.container {
display: flex；
align-items: center；
justify-content: center；
height: 100vh； /* 设置容器高度为视口高度 */
}
使用绝对定位
```css
.container {
position: relative；
height: 100vh； /* 设置容器高度为视口高度 */
}
.centered-element {
position: absolute；
top: 50%；
left: 50%；
transform: translate（-50%, -50%）；
}
使用 `display: table-cell` 和 `vertical-align````css.parent {
display: table-cell；
vertical-align: middle；
text-align: center；
}
.child {
display: inline-block；
}
综合应用
同时居中水平和垂直
```css
.container {
display: flex；
justify-content: center；
align-items: center；
height: 100vh； /* 设置容器高度为视口高度 */
}
以上方法适用于不同的布局需求，可以根据实际情况选择合适的方法。需要注意的是，在应用这些样式时，要确保父容器有明确的高度，否则居中效果可能不会如预期显示