在 HTML 中，要让内容居中，通常可以使用以下几种方法：
✅ 1. 使用 display: flex 和 justify-content: center（推荐）
这是现代 CSS 的常用方法，适用于大多数情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中示例</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.centered {
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
font-size: 24px;
text-align: center;
line-height: 100px; /* 使文字居中 */
}
</style>
</head>
<body>
<div >居中内容</div>
</body>
</html>✅ 2. 使用 text-align 和 margin: auto（适用于块级元素）
如果你使用的是块级元素（如 <div>），可以使用以下方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中示例</title>
<style>
.centered {
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
font-size: 24px;
text-align: center;
margin: 0 auto; /* 使内容居中 */
}
</style>
</head>
<body>
<div >居中内容</div>
</body>
</html>✅ 3. 使用 margin: 0 auto 和 width（适用于块级元素）
如果你希望内容在父容器中居中，可以这样做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中示例</title>
<style>
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
}
.centered {
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<div >
<div >居中内容</div>
</div>
</body>
</html>✅ 4. 使用 position: absolute 和 top: 50%（适用于固定定位）
如果你希望内容在页面中居中，可以使用绝对定位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中示例</title>
<style>
body {
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
font-size: 24px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div >居中内容</div>
</body>
</html>✅ 5. 使用 display: flex 和 align-items: center（适用于容器）
如果你希望容器内容居中，可以这样写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中示例</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.centered {
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
font-size: 24px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div >
<div >居中内容</div>
</div>
</body>
</html>✅ 总结
| 方法 | 适用场景 | 优点 |
|---|---|---|
display: flex + justify-content: center |
大多数情况 | 简单、灵活 |
margin: auto |
块级元素 | 适用于块级元素 |
position: absolute + top: 50% |
页面居中 | 需要固定定位 |
align-items: center + justify-content: center |
容器内容居中 | 容器需要设置 display: flex |
如果你有特定的布局需求（比如响应式设计、移动端适配等），可以告诉我，我可以帮你进一步优化。