HTML 在屏幕视图中间定位绝对定位的div

在本文中，我们将介绍如何使用HTML的绝对定位来将一个div元素居中在屏幕视图中。

阅读更多：HTML 教程

理解HTML中的绝对定位

在HTML中，绝对定位是一种CSS属性，用于指定元素的位置。相对于其最近的已定位的祖先元素进行定位，如果没有已定位的祖先元素，则参照于浏览器窗口。

居中定位的原理

要将一个绝对定位的元素居中，我们可以使用如下步骤：

将父元素进行相对定位；
将子元素进行绝对定位，并设置left和top属性为50%；
使用transform属性进行平移，将子元素的左上角移动到屏幕的中心位置。

下面是一个例子，我们将使用这个步骤来将一个div元素居中定位。

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    position: relative;
    width: 100%;
    height: 100vh;
  }

  .center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #f1f1f1;
    padding: 20px;
  }
</style>
</head>
<body>

<div class="container">
  <div class="center">
    <h1>Hello, Centered Div!</h1>
    <p>This is a centered div using absolute positioning.</p>
  </div>
</div>

</body>
</html>

在上面的例子中，我们使用了一个包含两个div元素的HTML文档。父元素具有类名为”container”的类，并设置了position: relative属性来进行相对定位。子元素具有类名为”center”的类，并设置了position: absolute属性来进行绝对定位。然后，我们设置了left和top属性为50%，将子元素的左上角移动到父元素的中心位置。最后，我们使用transform: translate(-50%, -50%)属性来将子元素的中心点移动到屏幕的中心位置。通过设置padding属性，我们可以为这个居中的div添加一些内边距。

保存并打开上面的示例代码，您将看到一个居中显示的div，其中包含一个标题和一些文本。这个div将始终保持在屏幕的中心位置，无论您的窗口大小如何变化。

需要注意的是，上述的例子中，我们将父元素的高度设置为100vh，这是为了能够把整个div元素居中显示在屏幕中间。如果没有设置父元素的高度，那么div将相对于其包含的内容进行定位，而不是相对于屏幕视图。