◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
如何在 HTML 和 CSS 中使 Div 居中？
ID:15322 / 打印
虽然这是 web 开发中的典型活动，但将 div 居中对于新手来说可能会很困难。理解使 div 水平、垂直或两者居中的多种技术至关重要。这篇文章将引导您完成多种方法来完成此任务，并附有解释和代码示例。
简介
制作美观且平衡的设计的一个重要组成部分是将网页上的组件居中。无论您创建的用户界面有多复杂，即使对于简单的网页，能够将 div 居中也是至关重要的。这篇文章将讨论在 html 和 css 中将 div 居中的多种方法（包括传统方法和前沿方法）。
为什么要让 div 居中？
立即学习“前端免费学习笔记（深入）”；
将 div 居中可以增强网页的布局和可读性。它有助于创建平衡的设计并确保用户可以轻松访问内容。无论是文本框、图像还是表单，将这些元素居中可以使您的网站看起来更加专业和有条理。
使 div 居中的方法
在 html 和 css 中，有多种方法可以使 div 居中。我们将介绍以下技术：
使用边距：自动；
使用 flexbox
使用网格布局
使用 css 变换
使用文本对齐
使用仓位和负保证金
每种方法都有其优点和用例。让我们通过详细的解释和代码示例来深入研究每一个。
- 使用边距：自动；
边距：自动；方法是使 div 水平居中的最简单方法之一。它的工作原理是将左右边距设置为自动，从而均匀分配 div 两侧的可用空间。
水平居中
<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><div class="center-horizontally"> this div is centered horizontally. </div> 上面的例子中，div使用margin: 0 auto;水平居中。 div 的宽度设置为 50%，因此它占据了一半的可用空间，两侧边距相等。
垂直居中
要使用 margin: auto; 使 div 垂直居中，需要设置父容器和 div 本身的高度。这种方法不像水平居中那么简单。
<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><div class="container"> <div class="center-vertically"> this div is centered vertically. </div> </div> 在此示例中，我们使用 flex 容器将 div 垂直居中。高度：100vh；确保容器占据视口的整个高度。显示：flex;、justify-content:center;、align-items:center;属性在容器内水平和垂直对齐 div。
- 使用 flexbox
flexbox 是一种现代布局模型，提供了一种在容器中的项目之间对齐和分配空间的有效方法。它简化了水平和垂直居中元素的过程。
水平居中
<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><div class="flex-container"> <div class="center-flex-horizontally"> this div is centered horizontally with flexbox. </div> </div> 在这个例子中，我们使用 flexbox 将 div 水平居中。显示屏：柔性；并调整内容：中心；容器的属性确保 div 居中。
垂直居中
<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><div class="flex-container"> <div class="center-flex-vertically"> this div is centered vertically with flexbox. </div> </div> 在这个例子中，我们使用 flexbox 使 div 垂直居中。对齐项目：居中；容器的属性确保 div 在容器内垂直居中。
水平和垂直居中
<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><div class="flex-container"> <div class="center-flex"> this div is centered both horizontally and vertically with flexbox. </div> </div> 在这个例子中，我们同时使用 justify-content: center;和对齐项目：居中；将 div 在容器内水平和垂直居中。
- 使用网格布局
css 网格布局是另一个强大的布局系统，可以让您轻松创建复杂的布局。它提供了一种将元素居中的简单方法。
水平居中
<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><div class="grid-container"> <div class="center-grid-horizontally"> this div is centered horizontally with grid. </div> </div> 在这个例子中，我们使用css网格布局来水平居中div。地点项目：中心；属性使 div 水平和垂直居中，但由于我们专注于水平居中，所以它达到了预期的结果。
垂直居中
<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><div class="grid-container"> <div class="center-grid-vertically"> this div is centered vertically with grid. </div> </div> 在这个例子中，我们使用 css 网格布局将 div 垂直居中。地点项目：中心；属性使 div 水平和垂直居中。
水平和垂直居中
<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><div class="grid-container"> <div class="center-grid"> this div is centered both horizontally and vertically with grid. </div> </div> 在这个例子中，place-items: center;属性使 div 在容器内水平和垂直居中。
- 使用 css 变换
css transform 允许您操纵元素的外观和位置。您可以使用transform属性将div居中。
水平居中
<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><div class="center-transform-horizontally"> this div is centered horizontally with transform. </div> 本例中，左边：50%；和变换：translatex(-50%)；属性使 div 水平居中。位置：绝对；属性将 div 相对于其最近定位的祖先进行定位。
垂直居中
<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><div class="center-transform-vertically"> this div is centered vertically with transform. </div> 本例中，顶部：50%；和变换：translatey(-50%)；属性使 div 垂直居中。位置：绝对；属性将 div 相对于其最近定位的祖先进行定位。
水平和垂直居中
<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><div class="center-transform"> this div is centered both horizontally and vertically with transform. </div> 在此示例中，顶部：50%;，左侧：50%;，以及变换：translate(-50%, -50%);属性使 div 水平和垂直居中。位置：绝对；属性将 div 相对于其最近定位的祖先进行定位。
- 使用文本对齐
text-align 属性通常用于使文本居中，但它也可以用于使容器内的块元素居中。
水平居中
<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><div class="container"> <div class="center-text-align"> this div is centered horizontally with text-align. </div> </div> 在这个例子中，容器有text-align: center;，div有display: inline-block;。这将使 div 在容器内水平居中。
- 使用仓位和负保证金
使用位置和负边距是使 div 水平和垂直居中的另一种方法。
水平和垂直居中
<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><div class="center-position"> This div is centered both horizontally and vertically with Position and Negative Margin. </div> 本例中，顶部：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 居中。快乐编码！
