居中 div：在网页中居中 div 的不同方法
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
作为一名网页开发者，你最常做的事情之一就是将一个div元素在网页上居中显示。因此，在这篇短文中，我将讨论三种不同的div元素居中显示的方法。
免责声明：这些方法并非最佳方案，这只是对我创造力极限的一次测试。
这里的每个解决方案都将使用以下初始代码。我们将从一个假设的欢迎卡片开始，该卡片用于访问博客。（我使用标签br只是为了减少几行 CSS 代码。）
<div class="card-holder">
<div class="card">
<h1>Hello There👋</h1>
<br>
<p>Welcome to my blog</p>
<br>
<button>Get Started!</button>
</div>
<div>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card-holder{
width: 100vw;
min-height: 100vh;
}
.card{
background: #45CE30;
padding: 20px;
width: 80%;
max-width: 500px;
text-align: center;
font-family: Arial;
}
这里编写的 CSS 代码只是简单地重置了所有元素的边距和内边距。将 box-sizing 设置为“border-box”可以简化 CSS 的编写，因为它包含了元素的所有边距和内边距。之后，我设置了divwith 类card-holder，使其占据视口的全部可用宽度和高度。这有助于定位内部的 div 元素。最后，我为卡片应用了一些样式，包括背景和内边距，并指定了宽度和最大宽度，使其在大屏幕上看起来不会太大。然后，我将所有文本居中对齐，并设置了 Arial 字体。
经过这些调整后，我们的卡片看起来大概会是这样。
我们试图达到的结果：
1. Flexbox 方法：
我通常使用 Flexbox 布局将一个 div 元素居中显示在网页上。为此，我们需要修改外部 div 元素（即卡片夹）的 CSS，使其以 Flexbox 布局显示，然后使其justify-content居中align-items。因此，代码需要进行如下修改：
.card-holder{
/* other base styles go here */
display: flex;
justify-content: center;
align-items: center;
}
修改后，卡片将居中显示。
2. 绝对定位：
为此，我们需要将父元素的定位设置为相对定位。设置好之后，我们就可以将子元素的定位设置为绝对定位。然后，我们可以将子元素向上移动 50%，向左移动 50%。因此，此时 CSS 代码如下所示：
.card-holder{
/* other base styles go here */
position: relative;
}
.card{
/* other base style */
position: absolute;
top: 50%;
left: 50%;
}
但是，经过这些操作后，div 元素仍然不会居中。它看起来会像这样：
仔细观察你会发现，卡片的左上角位于页面中心。因此，我们需要移动这张卡片。移动卡片最简单的方法之一，无论卡片大小如何，就是使用transformCSS 属性。CSS 的 transform 属性有很多用途，其中之一就是 translate，它可以移动元素而不改变周围其他元素的位置。transform translate 属性的优点之一是它可以接受百分比值，这些百分比是根据应用此样式的元素的宽度和高度计算的。
因此，将 transform 的 translateX 和 translateY 分别设置为 -50%，将使卡片向左上方移动，使其中心移动到之前左上角的位置。所以这行代码看起来是这样的：
.card{
/* other base style */
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
3. 使用网格模板和定位：
CSS 网格系统和弹性盒子系统的出现彻底改变了网页设计。它们的引入旨在让网页开发者摆脱当时流行的浮动布局和清除浮动的繁琐操作。使用网格系统，几乎可以创建任何布局。
所以我们的想法是创建一个 3x3 的网格，并将卡片放置在网格的中间。为此，我们需要将卡片框显示为网格，然后需要将该网格设置为三行三列。所需的 CSS 代码如下：
.card-holder{
/* other base styles go here */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
完成这些操作后，您可能看不到除卡片高度和宽度变化之外的任何其他变化。但如果您使用开发者工具，您将能够看到创建的网格如下所示：
现在，我们需要将卡片放置在网格中心。为此，我们可以使用grid-row属性grid-column来选择网格项应该位于哪几条网格线之间。网格线编号大致如下所示：
所以，如果你仔细查看行号，就会立刻发现我们需要将卡片放置在网格的第 1 行到第 2 行，以及该列的第 1 行到第 2 行。因此，代码如下所示：
.card{
/* other base style */
grid-row: 2/3;
grid-column: 2/3;
}
现在，你会发现这个 div 没有正确居中。为此，我们可以使用以下代码margin: 0 auto;将卡片居中：但是，即使这样，卡片内的内容仍然不会垂直对齐。
为此，我们需要修改 HTML 代码，将卡片的内容放在另一个 div 元素中。然后，我们需要将卡片分成三列，并将该 div 元素放置在卡片中间的列中。因此，HTML 和 CSS 的修改如下所示：
<body>
<div class="card-holder">
<div class="card">
<div>
<h1>Hello There👋</h1>
<br>
<p>Welcome to my blog</p>
<br>
<button>Get Started!</button>
</div>
</div>
<div>
</body>
.card{
/* other default style */
grid-row: 2/3;
grid-column: 2/3;
margin: 0 auto;
display: grid;
grid-template-rows: 1fr 6fr 1fr;
}
.card div{
grid-row: 2/3;
}
现在，这种方法需要针对较小的屏幕尺寸进行一些调整，这可以通过媒体查询轻松实现，只需将grid-template-columns输入值设置.card-holder为类似“1fr 5fr 1fr”的值即可。在我的例子中，这样设置后，在移动设备上显示效果如下：
为了实现这一点，我使用了以下代码：
@media (max-width: 768px){
.card-holder{
grid-template-columns: 1fr 6fr 1fr;
}
.card{
padding: 20px;
}
}
对于形状更方正的设备，可能还需要进行一些调整。因此，这种方法并非完全可靠。
荣誉提名1：我尝试的第一个方法
我原本的想法是把卡片的边距设置为“自动”，以为这样水平边距自动居中，垂直边距也会自动居中。但结果并非如此。将垂直边距设置为 0 后，它们的默认值仍然是 0。
荣誉提名2：如果您只是想将文本居中，而不需要其他任何功能。
在这种情况下，我们的 HTML 代码大致如下所示：
<body>
<div class="card-holder">
<h1>Hello World!</h1>
<div>
</body>
我们最初为持卡人和h1元素设计的CSS样式如下：
.card-holder{
width: 100vw;
min-height: 100vh;
}
h1{
font-size: 4rem;
font-family: Arial, Helvetica, sans-serif;
}
效果如下：
现在我们只需在 h1 元素中编写两行 CSS 代码即可更改此行为：
h1{
font-size: 4rem;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
line-height: 100vh;
}
效果如下：
最终判决
这只是个有趣的帖子，用来测试我的 CSS 技能。如果是个实际项目，我会用方法一来居中 div 元素。如果你知道其他方法，请在下方留言告诉我。
文章来源：https://dev.to/abthakur/ Different-ways-to-center-a-div-in-a-webpage-5enn