HTML 如何在div中垂直居中一个标签

在本文中，我们将介绍如何在HTML中使用CSS将一个标签垂直居中于一个div元素中。

阅读更多：HTML 教程

使用table-cell和vertical-align属性

一种常用的方法是使用display属性将需要居中的标签的父元素设置为table，将需要居中的标签设置为table-cell，并利用vertical-align属性实现垂直居中。下面是一个示例代码：

<style>
    .container {
      display: table;
      height: 300px; /* 设定div的高度 */
      width: 200px; /* 设定div的宽度 */
    }

    .centered-label {
      display: table-cell;
      vertical-align: middle;
      text-align: center; /* 如果需要水平居中也可以设置text-align属性为center */
    }
</style>

<div class="container">
  <label class="centered-label">居中的标签</label>
</div>

在上述代码中，为了让div元素具有高度和宽度，我们设置了.container类的height和width属性。然后，我们使用display: table将容器元素作为表格显示，将label元素的display属性设置为table-cell，使其布局方式类似于表格的单元格，并将其vertical-align属性设置为middle实现垂直居中。如果我们还需要使标签水平居中，可以将label元素的text-align属性设置为center。

使用flexbox

另一种常用的方法是使用CSS的flexbox布局。flexbox是一种弹性布局模型，可以通过设置flex容器和其中的子元素的属性，实现各种灵活的布局效果，包括垂直居中。下面是一个使用flexbox实现垂直居中的示例代码：

<style>
    .container {
      display: flex;
      align-items: center;
      justify-content: center; /* 如果需要水平居中也可以设置justify-content属性为center*/
      height: 300px; /* 设定div 的高度 */
      width: 200px; /* 设定div 的宽度 */
    }
</style>

<div class="container">
  <label>居中的标签</label>
</div>

在上述代码中，我们将.container类的display属性设置为flex，使其成为一个flex容器。通过设置align-items属性为center，我们可以将其中的子元素垂直居中。如果我们还需要使标签水平居中，可以将justify-content属性设置为center。

使用绝对定位和transform属性

还有一种方法是使用CSS的绝对定位和transform属性。我们可以将需要居中的标签设置为绝对定位，并且通过利用transform属性将其位置移动到div的中间。下面是一个示例代码：

<style>
    .container {
      position: relative;
      height: 300px; /* 设定div 的高度 */
      width: 200px; /* 设定div 的宽度 */
    }

    .centered-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center; /* 如果需要水平居中也可以设置text-align属性为center */
    }
</style>

<div class="container">
  <label class="centered-label">居中的标签</label>
</div>

在上述代码中，我们首先将.container类的position属性设置为relative，使其成为一个相对定位的父元素。然后，我们将.centered-label类的position属性设置为absolute以使其脱离文档流，并利用top和left属性以50%的偏移量将其移动到了容器的中间位置。最后，我们使用transform属性的translate函数以-50%的偏移量再次调整标签元素的位置，使其相对于自身水平和垂直居中。

总结

本文介绍了三种常用的方法来实现在HTML中垂直居中一个标签于一个div元素中。第一种方法是使用table-cell和vertical-align属性，第二种方法是使用flexbox布局，第三种方法是使用绝对定位和transform属性。根据实际需求和浏览器的支持情况，可以选择最适合的方法来实现垂直居中效果。希望本文对您有帮助！