如何将文本放在页面中间

在 web 开发中，经常需要将文本垂直居中并放置在页面中心。虽然有很多方法可以实现这个效果，但是下面我们将介绍三个常用的方法。

方法一：使用 flex 布局

<div class="container">
  <p class="centered-text">Hello, World!</p>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.centered-text {
  text-align: center;
  font-size: 3rem;
}

使用 flex 布局是将文本居中的最简单和最直接的方法。我们首先要将文本所在的容器元素设置为 flex 布局，并使用 justify-content 和 align-items 属性将它们分别设置为水平和垂直方向的居中。

方法二：使用绝对定位

<div class="container">
  <p class="centered-text">Hello, World!</p>
</div>

.container {
  position: relative;
  height: 100vh;
}

.centered-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 3rem;
}

使用绝对定位是在 web 中实现文本居中的另一种常见方法。我们需要将容器元素设置为相对定位，将文本元素设置为绝对定位，并使用 left、top 和 transform 属性将文本元素居中对齐。

方法三：使用 table 布局

<div class="container">
  <table>
    <tr>
      <td>
        <p class="centered-text">Hello, World!</p>
      </td>
    </tr>
  </table>
</div>

.container {
  display: table;
  width: 100%;
  height: 100vh;
}

table {
  display: table-cell;
  vertical-align: middle;
}

.centered-text {
  text-align: center;
  font-size: 3rem;
}

最后一个方法是使用 table 布局。我们需要将容器元素设置为 table 布局，并使用 display: table-cell 和 vertical-align: middle 属性将文本在表格单元格中的垂直居中对齐。

以上任何一种技术都可以帮助我们将文本放在页面的中心。选择哪种技术可能取决于具体情况和个人喜好。