如何将已知高度的容器如何在页面中水平垂直居中？

参考答案：

在CSS中，有多种方法可以将一个已知高度的容器在页面中水平和垂直居中。以下是两种常用的方法：

方法一：使用Flexbox

Flexbox 是一种现代的 CSS 布局模型，可以轻松实现元素的居中。你可以将父元素设置为 flex 容器，然后使用 justify-content 和 align-items 属性来分别控制子元素在水平和垂直方向上的对齐。

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 这将使得容器占据整个视口的高度 */
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
</div>

</body>
</html>

方法二：使用CSS的position和transform属性

这种方法需要更多的CSS代码，但也可以在更老的浏览器上工作。首先，你需要将父元素设置为相对定位，然后将子元素设置为绝对定位。然后，你可以使用 transform 属性来移动子元素。

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    position: relative;
    height: 100vh; /* 这将使得容器占据整个视口的高度 */
  }

  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
</div>

</body>
</html>

以上两种方法都可以将一个已知高度的容器在页面中水平和垂直居中。选择哪种方法取决于你的具体需求和浏览器兼容性要求。