div中内容水平垂直居中的方法

实现将 div 元素中的内容水平垂直居中有多种方法。以下是常用的方法：

使用 Flexbox 布局：

<style>

  .container {

    display: flex;

    justify-content: center;

    align-items: center;

    /* 可选：设置容器高度，以实现垂直居中 */

    height: 100vh; /* 100% 视窗高度 */

  }

</style>

<div class="container">

  <!-- 内容放在这里 -->

</div>

使用绝对定位和 transform：

<style>

  .container {

    position: relative;

    width: 100%; /* 可选：设置容器宽度 */

    height: 100vh; /* 可选：设置容器高度 */

  }

  .content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

  }

</style>

<div class="container">

  <div class="content">

    <!-- 内容放在这里 -->

  </div>

</div>

使用 Grid 布局：

<style>

  .container {

    display: grid;

    place-items: center;

    /* 可选：设置容器高度，以实现垂直居中 */

    height: 100vh; /* 100% 视窗高度 */

  }

</style>

<div class="container">

  <!-- 内容放在这里 -->

</div>

使用表格布局：

<style>

  .container {

    display: table;

    width: 100%;

    height: 100vh; /* 可选：设置容器高度，以实现垂直居中 */

  }

  .cell {

    display: table-cell;

    text-align: center;

    vertical-align: middle;

  }

</style>

<div class="container">

  <div class="cell">

    <!-- 内容放在这里 -->

  </div>

</div>

这些方法可以根据自身的具体需求进行选择。Flexbox 和 Grid 是比较现代的布局方式，而绝对定位和表格布局在某些情况下也很有用