p的文本如何垂直居中在div

要使 `<p>` 元素中的文本垂直居中在 `<div>` 元素中，可以使用 CSS 的 flex 布局或者 line-height 属性来实现。

1. 使用 flex 布局：

div {
  display: flex;
  align-items: center; /* 垂直居中 */
}

p {
  margin: 0; /* 去除默认的上下边距 */
}

在这个例子中，我们使用了 flex 布局，将 `<div>` 元素的 `display` 属性设置为 `flex`，并设置 `align-items` 属性为 `center`，这样就可以使 `<p>` 元素中的文本垂直居中。另外，我们还移除了 `<p>` 元素的默认上下边距，以使其更加紧凑。

2. 使用 line-height 属性：

div {
  height: 100px;
  line-height: 100px; /* 与 div 高度相等 */
  text-align: center; /* 水平居中 */
}

p {
  display: inline-block; /* 将 p 元素设置为行内块元素 */
  vertical-align: middle; /* 垂直居中 */
}

在这个例子中，我们设置了 `<div>` 元素的高度，并将其 `line-height` 属性设置为与高度相等，这样就可以使其内部的文本垂直居中。另外，我们还将 `<p>` 元素设置为行内块元素，并将其 `vertical-align` 属性设置为 `middle`，以使其垂直居中。最后，我们将 `<div>` 元素的 `text-align` 属性设置为 `center`，以使其内部的文本水平居中。