html水平垂直居中

要将 HTML 元素水平垂直居中，可以使用以下方法之一：

1. 使用 Flexbox 布局：
在父元素上应用 `display: flex;` 和 `justify-content: center; align-items: center;`，这将使其子元素在水平和垂直方向上居中。

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* 或者其他高度 */
    }
</style>

<div class="container">
    <!-- 居中的内容 -->
</div>

2. 使用绝对定位和 transform 属性：
将要居中的元素设置为 `position: absolute;`，然后使用 `left: 50%; top: 50%;` 将其移动到父元素的中心点，最后使用 `transform: translate(-50%, -50%);` 根据自身宽高的一半进行调整。

<style>
    .container {
        position: relative;
        height: 100vh; /* 或者其他高度 */
    }
    .centered {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<div class="container">
    <div class="centered">
        <!-- 居中的内容 -->
    </div>
</div>

这些方法可以帮助你在 HTML 中实现水平垂直居中布局。