div 内容水平垂直居中方法

实现 div 内容的水平垂直居中可以使用多种方法，以下是其中的几种：

1. 使用 Flex 布局：将 div 的样式设置为 display: flex;，并设置 justify-content 和 align-items 属性为 center。

<div style="display: flex; justify-content: center; align-items: center;">
  <p>这是要水平垂直居中的内容</p>
</div>

2. 使用绝对定位和 transform 属性：将 div 的定位方式设置为 absolute，再使用 top, left, right, bottom 属性将其定位到父元素中心，最后使用 transform 属性将其自身向左上方偏移 50% 的距离。

<div style="position: relative;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    <p>这是要水平垂直居中的内容</p>
  </div>
</div>

3. 使用表格布局：将 div 的样式设置为 display: table;，再将其内部元素设置为 display: table-cell; 和 vertical-align: middle; 实现内容的垂直居中。

<div style="display: table; width: 100%; height: 100%;">
  <div style="display: table-cell; vertical-align: middle; text-align: center;">
    <p>这是要水平垂直居中的内容</p>
  </div>
</div>

这些方法都可以实现 div 内容的水平垂直居中，具体可以根据实际情况选择使用。