小盒子字体居中 div

要在HTML中让字体水平垂直居中在一个div元素里，可以使用CSS的flexbox或者grid布局，以及line-height属性。这里提供两种常见的方法：

1. **Flexbox**:

<style>
  .centered-div {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;   /* 垂直居中 */
    height: 200px;        /* 定义div的高度，这里为了示例，你可以自适应 */
    font-size: 24px;      /* 字体大小 */
  }
</style>

<div class="centered-div">
  这里是居中的文字
</div>

2. **Grid**:

<style>
  .centered-div {
    display: grid;
    place-items: center;  /* 同样实现水平垂直居中 */
    height: 200px;
    font-size: 24px;
  }
</style>

<div class="centered-div">
  这里是居中的文字
</div>

在这两个例子中，只要给包含文本的div添加相应的CSS样式，文字就会自动居中。