1.三种常见方法
- 使用translate位移 + position定位实现
- 使用Grid布局实现
- 使用Flex布局实现
2.代码示例
2.1 translate + position:使用绝对定位，让盒子脱离文档流，通过top和left将盒子的左上角放到中心点上，然后使用translate移动使其居中。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>页面水平垂直居中</title><style>.box {position: absolute;width: 400px;height: 400px;top: 50%; /* 把元素的“上边缘”放到包含块高度的 50% 处 */left: 50%; /* 把元素的“左边缘”放到包含块宽度的 50% 处 */transform: translate(-50%, -50%);/*向左、向上各移动自身宽/高的 50%，让元素中心与包含块中心重合 */background-color: pink;}</style></head><body><div class="box"></div></body>
</html>
2.2 Grid布局：使用place-item:center实现居中。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>页面水平垂直居中</title><style>.parent {display: grid;place-items: center; /* 同时水平和垂直居中 */height: 100vh; /* 为了示例效果，父元素设置全屏高度 */}.child {width: 100px;height: 100px;background-color: blue;}</style></head><body>
<div class="parent"><div class="child"></div>
</div></body>
</html>
2.3 Flex布局:使用justify-content: center和align-items: center，通过控制主轴和交叉轴实现居中。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>页面水平垂直居中</title><style>.parent {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 为了示例效果，父元素设置全屏高度 */}.child {width: 100px;height: 100px;background-color: red;}</style></head><body>
<div class="parent"><div class="child"></div>
</div></body>
</html>
