如何使文本在HTML div元素中实现垂直和水平居中显示？

要在HTML的div元素中实现文本的垂直和水平居中显示，可以采用以下几种方法：

1. 使用Flexbox布局：给包含文本的div设置display: flex; 和 justify-content: center; 和 align-items: center; 属性，可以使内容在行内和跨行都居中。

<div style="display: flex; justify-content: center; align-items: center;">
   这里是居中文本
</div>

2. 使用Grid布局：同样地，为div设置display: grid; 和 justify-content: center; 和 align-items: center; 可以实现类似效果。

<div style="display: grid; place-items: center;">
   这里是居中文本
</div>

3. 利用position属性和绝对定位：给div设置position: relative;，然后将内部文本元素设置为position: absolute; top: 50%; left: 50%; 并通过transform: translate(-50%, -50%); 来实现居中。

<style>
    .centered {
        position: relative;
    }
    .centered p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<div class="centered">
    <p>这里是居中文本</p>
</div>