📅 最后修改于: 2023-12-03 15:35:57.299000 🧑 作者: Mango
中心 div 可以让你在屏幕中央显示内容，无论用户屏幕大小是多少。在本文中，我们将探讨如何使用 HTML 和 CSS 来实现中心 div。
首先，在 HTML 中创建一个 div 元素来包含我们想要居中显示的内容。添加一个 ID 属性以便在 CSS 中引用它。
<div id="center-div">
<!-- Your content here -->
</div>
接下来，在 CSS 中添加样式以使该 div 居中。将此样式添加到 ID 选择器中，以确保只在此特定 div 上应用它。
#center-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这些样式将 div 放置在屏幕的中央，无论屏幕的大小如何。position: absolute 将 div 从页面流中删除，并将其置于其父元素的顶部。top: 50% 和 left: 50% 则将其移到页面的中央。最后，transform: translate(-50%, -50%) 将其左移 50% 和上移 50%，以实现完全居中。
以下是一个完整的示例，演示了如何在 HTML 中创建一个基本的中心 div：
<!DOCTYPE html>
<html>
<head>
<title>Center Div Example</title>
<style>
#center-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="center-div">
<h1>Hello, World!</h1>
<p>This content is centered!</p>
</div>
</body>
</html>
到这里，我们已经了解了如何使用 HTML 和 CSS 来创建并居中一个 div。尽管有多种实现中心 div 的方法，本文所示的方法是最常用的方法之一。