文字居中的代码实现

<!– 1. 基础文本居中 –>
<div style=”text-align: center;”>
这段文字会水平居中显示
</div>

<!– 2. 块级元素内文字垂直水平居中 –>
<div style=”width: 200px; height: 100px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;”>
这段文字在盒子内垂直水平居中
</div>

<!– 3. 使用定位实现居中 –>
<div style=”position: relative; width: 200px; height: 100px; background: #f0f0f0;”>
<p style=”position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;”>
使用定位实现的居中
</p>
</div>