HTML 在屏幕中央定位

<

div> 元素

在本文中，我们将介绍如何使用 HTML 和 CSS 将

<

div> 元素定位于屏幕中央。屏幕中央定位的常见应用场景包括网页布局、模态框和弹出窗口，这些都可以通过 HTML 和 CSS 实现。

阅读更多：HTML 教程

使用 flexbox 居中定位

Flexbox 是 CSS 的一种布局模型，它提供了非常便利且强大的居中定位功能。通过设置父容器的 display 属性为 flex，并使用 align-items 和 justify-content 属性进行定位，我们可以很容易地将

<

div> 元素居中。

首先，我们创建一个父容器，其中包含一个

<

div> 子元素。然后，设置父容器的样式如下所示：

<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 100% 视口高度 */
}
</style>

在上面的代码中，我们使用 align-items 属性将子元素在垂直方向上居中对齐，使用 justify-content 属性将子元素在水平方向上居中对齐。此外，我们设置容器的高度为视口高度的 100%，以保持容器铺满整个屏幕。

接下来，我们在 HTML 中添加这个容器和子元素：

<div class="container">
  <div>我在屏幕中央</div>
</div>

现在，运行这段代码，就可以看到

<

div> 元素在屏幕中央水平和垂直居中了。

使用 absolute 定位居中

除了使用 flexbox，我们还可以使用 CSS 的绝对定位将

<

div> 元素居中。通过设置父容器的 position 属性为 relative，子元素的 position 属性为 absolute，再设置子元素的 top、bottom、left 和 right 属性为 0，并将子元素的 margin 属性设置为 auto，我们可以将

<

div> 元素定位于屏幕中央。

下面是一个示例代码：

<style>
.container {
  position: relative;
  height: 100vh; /* 100% 视口高度 */
}

.center-div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</style>

在上面的代码中，我们设置了一个父容器，并将其高度设置为 100% 的视口高度。然后，创建一个 class 为 “center-div” 的子元素，并设置其为绝对定位。通过将 top、bottom、left 和 right 属性设置为 0，将子元素定位到父容器的中心。最后，通过将 margin 属性设置为 auto，使子元素水平和垂直居中。

接下来，我们在 HTML 中添加这个容器和子元素：

<div class="container">
  <div class="center-div">我在屏幕中央</div>
</div>

现在，运行这段代码，你会看到

<

div> 元素位于屏幕的正中间。

无论是使用 flexbox 还是绝对定位，我们都可以轻松地将

<

div> 元素定位于屏幕的中央。这些方法提供了灵活性和可靠性，适用于各种不同的网页布局需求。

总结

在本文中，我们介绍了如何使用 HTML 和 CSS 将

<

div> 元素定位于屏幕中央。我们讨论了 flexbox 和绝对定位两种常用的居中定位技术，并给出了实际的示例代码。无论你是在设计网页布局还是创建模态框或弹出窗口，都可以使用这些方法来轻松实现屏幕中央定位。希望本文对你有所帮助！