虽然这是 web 开发中的典型活动，但将 div 居中对于新手来说可能会很困难。理解使 div 水平、垂直或两者居中的多种技术至关重要。这篇文章将引导您完成多种方法来完成此任务，并附有解释和代码示例。
简介
制作美观且平衡的设计的一个重要组成部分是将网页上的组件居中。无论您创建的用户界面有多复杂，即使对于简单的网页，能够将 div 居中也是至关重要的。这篇文章将讨论在 html 和 css 中将 div 居中的多种方法（包括传统方法和前沿方法）。
为什么要让 div 居中？
立即学习“前端免费学习笔记（深入）”；
将 div 居中可以增强网页的布局和可读性。它有助于创建平衡的设计并确保用户可以轻松访问内容。无论是文本框、图像还是表单，将这些元素居中可以使您的网站看起来更加专业和有条理。
使 div 居中的方法
在 html 和 css 中，有多种方法可以使 div 居中。我们将介绍以下技术：
使用边距：自动；
使用 flexbox
使用网格布局
使用 css 变换
使用文本对齐
使用仓位和负保证金
每种方法都有其优点和用例。让我们通过详细的解释和代码示例来深入研究每一个。
- 使用边距：自动；
边距：自动；方法是使 div 水平居中的最简单方法之一。它的工作原理是将左右边距设置为自动，从而均匀分配 div 两侧的可用空间。
水平居中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>center a div horizontally</title>
<style>
.center-horizontally {
width: 50%;
margin: 0 auto;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="center-horizontally">
this div is centered horizontally.
</div>
</body>
</html>
上面的例子中，div使用margin: 0 auto;水平居中。 div 的宽度设置为 50%，因此它占据了一半的可用空间，两侧边距相等。
垂直居中
要使用 margin: auto; 使 div 垂直居中，需要设置父容器和 div 本身的高度。这种方法不像水平居中那么简单。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>center a div vertically</title>
<style>
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.center-vertically {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="center-vertically">
this div is centered vertically.
</div>
</div>
</body>
</html>
在此示例中，我们使用 flex 容器将 div 垂直居中。高度：100vh；确保容器占据视口的整个高度。显示：flex;、justify-content:center;、align-items:center;属性在容器内水平和垂直对齐 div。
- 使用 flexbox
flexbox 是一种现代布局模型，提供了一种在容器中的项目之间对齐和分配空间的有效方法。它简化了水平和垂直居中元素的过程。
水平居中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>center a div horizontally with flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: center;
}
.center-flex-horizontally {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="center-flex-horizontally">
this div is centered horizontally with flexbox.
</div>
</div>
</body>
</html>
在这个例子中，我们使用 flexbox 将 div 水平居中。显示屏：柔性；并调整内容：中心；容器的属性确保 div 居中。
垂直居中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>center a div vertically with flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.center-flex-vertically {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="center-flex-vertically">
this div is centered vertically with flexbox.
</div>
</div>
</body>
</html>
在这个例子中，我们使用 flexbox 使 div 垂直居中。对齐项目：居中；容器的属性确保 div 在容器内垂直居中。
水平和垂直居中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>center a div with flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.center-flex {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="center-flex">
this div is centered both horizontally and vertically with flexbox.
</div>
</div>
</body>
</html>
在这个例子中，我们同时使用 justify-content: center;和对齐项目：居中；将 div 在容器内水平和垂直居中。
- 使用网格布局
css 网格布局是另一个强大的布局系统，可以让您轻松创建复杂的布局。它提供了一种将元素居中的简单方法。
水平居中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>center a div horizontally with grid</title>
<style>
.grid-container {
display: grid;
place-items: center;
height: 100vh;
}
.center-grid-horizontally {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="center-grid-horizontally">
this div is centered horizontally with grid.
</div>
</div>
</body>
</html>
在这个例子中，我们使用css网格布局来水平居中div。地点项目：中心；属性使 div 水平和垂直居中，但由于我们专注于水平居中，所以它达到了预期的结果。
垂直居中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>center a div vertically with grid</title>
<style>
.grid-container {
display: grid;
place-items: center;
height: 100vh;
}
.center-grid-vertically {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="center-grid-vertically">
this div is centered vertically with grid.
</div>
</div>
</body>
</html>
在这个例子中，我们使用 css 网格布局将 div 垂直居中。地点项目：中心；属性使 div 水平和垂直居中。
水平和垂直居中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>center a div with grid</title>
<style>
.grid-container {
display: grid;
place-items: center;
height: 100vh;
}
.center-grid {
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="center-grid">
this div is centered both horizontally and vertically with grid.
</div>
</div>
</body>
</html>
在这个例子中，place-items: center;属性使 div 在容器内水平和垂直居中。
- 使用 css 变换
css transform 允许您操纵元素的外观和位置。您可以使用transform属性将div居中。
水平居中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>center a div horizontally with transform</title>
<style>
.center-transform-horizontally {
width: 50%;
position: absolute;
left: 50%;
transform: translatex(-50%);
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="center-transform-horizontally">
this div is centered horizontally with transform.
</div>
</body>
</html>
本例中，左边：50%；和变换：translatex(-50%)；属性使 div 水平居中。位置：绝对；属性将 div 相对于其最近定位的祖先进行定位。
垂直居中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>center a div vertically with transform</title>
<style>
.center-transform-vertically {
width: 50%;
position: absolute;
top: 50%;
transform: translatey(-50%);
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="center-transform-vertically">
this div is centered vertically with transform.
</div>
</body>
</html>
本例中，顶部：50%；和变换：translatey(-50%)；属性使 div 垂直居中。位置：绝对；属性将 div 相对于其最近定位的祖先进行定位。
水平和垂直居中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>center a div with transform</title>
<style>
.center-transform {
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="center-transform">
this div is centered both horizontally and vertically with transform.
</div>
</body>
</html>
在此示例中，顶部：50%;，左侧：50%;，以及变换：translate(-50%, -50%);属性使 div 水平和垂直居中。位置：绝对；属性将 div 相对于其最近定位的祖先进行定位。
- 使用文本对齐
text-align 属性通常用于使文本居中，但它也可以用于使容器内的块元素居中。
水平居中
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>center a div horizontally with text-align</title>
<style>
.container {
text-align: center;
}
.center-text-align {
display: inline-block;
width: 50%;
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="center-text-align">
this div is centered horizontally with text-align.
</div>
</div>
</body>
</html>
在这个例子中，容器有text-align: center;，div有display: inline-block;。这将使 div 在容器内水平居中。
- 使用仓位和负保证金
使用位置和负边距是使 div 水平和垂直居中的另一种方法。
水平和垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div with Position and Negative Margin</title>
<style>
.center-position {
width: 50%;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /* Half of the height */
margin-left: -25%; /* Half of the width */
background-color: #f0f0f0;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="center-position">
This div is centered both horizontally and vertically with Position and Negative Margin.
</div>
</body>
</html>
本例中，顶部：50%；左：50%；属性将 div 定位在容器的中间。顶部边距：-100px；左边距：-25%；属性通过分别偏移其高度和宽度的一半来使 div 居中。
结论
在 html 和 css 中将 div 居中可以使用多种方法来完成。每种技术都有其优点并适用于不同的场景。无论您选择使用边距：auto;、flexbox、网格布局、css 变换、文本对齐还是位置和负边距，了解这些方法都将帮助您创建平衡且具有视觉吸引力的设计。
通过掌握这些技术，您可以增强网页的布局和可读性，使它们更加用户友好和专业。尝试这些方法，找到最适合您的需求和项目的具体要求的方法。
参考资料
mdn web 文档 - css：级联样式表
css-tricks - flexbox 完整指南
css-tricks - 网格完整指南
w3schools - css
mdn web 文档 - 使用 css 灵活框
mdn 网络文档 - css 网格布局
通过遵循本指南，无论布局多么复杂，您都可以放心地将 div 居中。快乐编码！
