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

要使 `<p>` 元素中的文本在 `<div>` 元素中水平和垂直居中，可以使用 CSS 的 flex 布局、position 和 transform 属性来实现。

1. 使用 flex 布局：

div {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100px; /* 设置 div 的高度 */
}

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

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

2. 使用 position 和 transform 属性：

div {
  position: relative;
  height: 100px; /* 设置 div 的高度 */
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; /* 去除默认的上下边距 */
}

在这个例子中，我们将 `<div>` 元素的 `position` 属性设置为 `relative`，以便内部的 `<p>` 元素可以使用 `absolute` 定位。然后，我们将 `<p>` 元素的 `position` 属性设置为 `absolute`，并将其 `top` 和 `left` 属性设置为 `50%`，以使其相对于 `<div>` 元素垂直和水平居中。最后，我们使用 `transform` 属性将其向上和向左移动半个 `<p>` 元素的高度和宽度，以使其准确地居中。另外，我们还移除了 `<p>` 元素的默认上下边距，以使其更加紧凑。