css文字相交于div垂直居中

在CSS中，如果你想让一段文字垂直居中并与其所在的`<div>`相交（即文字位于`div`的顶部和底部），可以使用`text-align`属性配合`line-height`和`vertical-align`。如果`div`本身设置了高度，你可以这样做：

1. 使用`text-align: center;`使文本水平居中；
2. 给`div`设置`line-height`等于其高度，这样可以让文本垂直居中；
3. 使用`vertical-align: middle;`确保行内元素（如文本）的垂直对齐也是中间位置。

示例代码如下：

<div style="position: relative; height: 200px; /* 设定div的高度 */ background-color: #f1f1f1;">
  <p style="font-size: 24px; text-align: center; line-height: 200px; vertical-align: middle;">这是垂直居中的文字</p>
</div>

这里，`.div`通过`position: relative;`和`height: ...`设置了相对定位并设定了高度，而`<p>`标签内的文字则使用了上述样式。