html的div盒子居中

要将一个 `<div>` 盒子居中，你可以使用以下两种方法：

1. 使用 CSS 居中布局：
- 设置 `<div>` 的宽度和高度。
- 使用 `margin` 属性将 `left` 和 `right` 设置为 `auto`，并将 `top` 和 `bottom` 设置为 `0`。
- 将 `position` 属性设置为 `relative` 或 `absolute`，以便在父元素中居中。
- 例如：

     <style>
       .centered {
         position: relative;
         width: 200px;
         height: 200px;
         margin: 0 auto;
         top: 0;
         bottom: 0;
       }
     </style>
     <div class="centered"></div>

2. 使用 Flexbox 居中布局：
- 在容器元素上应用 `display: flex;` 属性，将其设置为弹性容器。
- 使用 `justify-content: center;` 和 `align-items: center;` 将内容在水平和垂直方向上都居中。
- 例如：

     <style>
       .container {
         display: flex;
         justify-content: center;
         align-items: center;
         width: 100%;
         height: 100vh;
       }
     </style>
     <div class="container">
       <div>居中的内容</div>
     </div>

这些方法可以让你在 HTML 中实现 `<div>` 盒子的居中效果。根据你的需求选择合适的方法。