在html5静态网页开发中，居中布局是最基础也最常用的排版需求。无论是导航栏、卡片还是一段文字，都需要通过合理的css对齐方式让内容在页面中看起来协调。下面汇总几种在静态网页里稳定可用的居中方法。
一、水平居中布局
1. 行内或文本元素居中
对于文本、链接、图片等行内元素，可以直接在父容器上使用 text-align:center 来实现水平居中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本居中</title>
<style>
.box {
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<p>这一段文字会在容器中水平居中显示</p>
</div>
</body>
</html>
2. 块级元素水平居中
如果是固定宽度的块级元素，设置左右外边距为auto是最简单的方案。
.container {
width: 600px;
margin-left: auto;
margin-right: auto;
}
二、垂直居中布局
1. 单行文本垂直居中
让容器高度与行高一致，即可实现单行文字的垂直居中。
.line {
height: 50px;
line-height: 50px;
}
2. 使用flex实现垂直居中
flex布局在静态网页中同样适用，且代码简洁、兼容性良好。
.parent {
display: flex;
align-items: center;
height: 200px;
}
三、水平垂直同时居中
1. flex综合方案
同时设置主轴和交叉轴对齐方式，可快速让子元素居中。
.center-box {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
2. 绝对定位加transform
对于未知宽高的元素，可以用绝对定位配合位移实现居中。
.wrap {
position: relative;
height: 400px;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
四、方法对比
| 方式 | 适用场景 | 优点 |
|---|---|---|
| text-align:center | 行内元素 | 写法简单 |
| margin:auto | 固定宽块元素 | 无需额外布局属性 |
| flex | 各类容器 | 灵活、易控 |
| absolute+transform | 未知宽高 | 不依赖父级布局 |
以上就是在html5静态网页中常用的居中布局与对齐方式。实际项目中可根据结构复杂度与兼容要求灵活选用，不必拘泥于单一写法。