如何在HTML5中快速实现文字居中？

<div class="content">
  <p>在网页设计中，文字居中是提升视觉体验的常见需求，HTML5结合CSS提供了多种实现文字居中的方法，本文将详细介绍五种实用方案，帮助您根据场景灵活选择。</p>
  <section>
    <h3>一、使用 text-align 属性水平居中</h3>
    <p>适用于文本在<strong>块级元素</strong>中的水平对齐：</p>
    <pre><code class="language-html">&lt;div style="text-align: center;"&gt;
  这段文字将在父容器中水平居中
&lt;/div&gt;</code></pre>
    <div class="demo-box" style="border: 1px solid #ddd; padding: 10px; text-align: center; margin: 10px 0;">
      演示效果：文字水平居中
    </div>
  </section>
  <section>
    <h3>二、margin 属性实现块级元素居中</h3>
    <p>针对<strong>固定宽度</strong>的块级元素：</p>
    <pre><code class="language-css">.center-box {
  width: 60%;
  margin: 0 auto;
}</code></pre>
    <p>此方法通过左右外边距自动计算实现居中，注意需要设置元素宽度。</p>
  </section>
  <section>
    <h3>三、垂直居中方案 - line-height</h3>
    <p>单行文本垂直居中最佳实践：</p>
    <pre><code class="language-css">.vertical-center {
  height: 100px;
  line-height: 100px;
}</code></pre>
    <div class="demo-box" style="height: 60px; line-height: 60px; background: #f0f8ff; margin: 10px 0;">
      垂直居中演示文本
    </div>
  </section>
  <section>
    <h3>四、Flexbox 终极居中方案</h3>
    <p>现代浏览器推荐的布局方式：</p>
    <pre><code class="language-css">.flex-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 300px;
}</code></pre>
    <div style="display: flex; justify-content: center; align-items: center; height: 100px; background: #fff3cd; margin: 10px 0;">
      <span>双向居中内容</span>
    </div>
  </section>
  <section>
    <h3>五、CSS Grid 布局方案</h3>
    <p>新一代布局标准实现：</p>
    <pre><code class="language-css">.grid-container {
  display: grid;
  place-items: center;
  height: 200px;
}</code></pre>
    <div style="display: grid; place-items: center; height: 80px; background: #dff0d8; margin: 10px 0;">
      网格布局居中文本
    </div>
  </section>
  <section class="tips">
    <h3>注意事项</h3>
    <ul>
      <li>确保父容器有明确的高度设置（垂直居中时）</li>
      <li>Flexbox/Grid 布局需要考虑浏览器兼容性</li>
      <li>行内元素建议使用 text-align 方式</li>
    </ul>
  </section>
  <footer>
    <h3>引用说明</h3>
    <ul>
      <li>MDN Web Docs: CSS Text Module</li>
      <li>W3C CSS Flexible Box Layout Module</li>
      <li>CanIUse 兼容性查询数据</li>
    </ul>
  </footer>
</div>
<style>
.content {
  max-width: 800px;
  margin: 20px auto;
  padding: 30px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border-radius: 8px;
}
h3 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 8px;
  margin-top: 30px;
}
pre {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  overflow-x: auto;
}
.tips {
  background: #f8f9fa;
  padding: 20px;
  border-left: 4px solid #3498db;
  margin: 20px 0;
}
ul {
  padding-left: 20px;
  line-height: 1.6;
}
footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
</style>

（本文包含的代码示例均通过主流浏览器测试，具体实现可能因浏览器版本差异略有不同，建议在实际开发中做好兼容性测试。）