HTML5 中实现盒子水平垂直居中的方法

浩～~2025-05-13 9:44

在 HTML5 中，有几种方法可以让一个定位的盒子在父容器中水平垂直居中。以下是几种常用的方法：

使用 Flexbox 布局

html 复制代码

<div class="parent">
  <div class="child">居中内容</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    height: 100vh;            /* 设置父容器高度 */
  }
  
  .child {
    /* 子元素不需要特殊样式 */
  }
</style>

使用 Grid 布局

html 复制代码

<div class="parent">
  <div class="child">居中内容</div>
</div>

<style>
  .parent {
    display: grid;
    place-items: center;  /* 水平和垂直居中 */
    height: 100vh;
  }
</style>

使用绝对定位 + transform

html 复制代码

<div class="parent">
  <div class="child">居中内容</div>
</div>

<style>
  .parent {
    position: relative;
    height: 100vh;
  }
  
  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

使用绝对定位 + margin auto

html 复制代码

<div class="parent">
  <div class="child">居中内容</div>
</div>

<style>
  .parent {
    position: relative;
    height: 100vh;
  }
  
  .child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: fit-content;  /* 或者指定宽度 */
    height: fit-content; /* 或者指定高度 */
  }
</style>

使用表格布局（传统方法）

html 复制代码

<div class="parent">
  <div class="child">居中内容</div>
</div>

<style>
  .parent {
    display: table;
    width: 100%;
    height: 100vh;
  }
  
  .child {
    display: table-cell;
    text-align: center;  /* 水平居中 */
    vertical-align: middle;  /* 垂直居中 */
  }
</style>

现代 Web 开发中，推荐优先使用 Flexbox 或 Grid 布局方法，它们更简洁、灵活且易于维护。