实现页面内标题水平居中可用五种方法：一、text-align: center；二、margin: 0 auto（需设宽度）；三、Flexbox的justify-content: center；四、Grid的justify-items: center；五、绝对定位加transform: translateX(-50%)。
如果您希望在HTML页面中将标题文字水平居中显示，但默认的
标签内容仅出现在浏览器标签栏且不可见，实际需居中的是页面内可见的标题元素（如<h1>至<h6>）。以下是实现页面内标题居中显示的多种方法：
<h2>一、使用CSS text-align属性</h2>
</h6>
</h1>
<p>通过为标题元素设置text-align: center样式，可使其内部文本内容相对于其容器宽度水平居中。该方法简单直接，适用于块级标题元素。</p>
<p>1、在HTML中定义一个标题元素，例如</p>
<h2>我的页面标题</h2>。
<p>2、在<style>标签内或外部CSS文件中，为目标标题添加样式：h2 { text-align: center; }。</style></p>
<p>3、保存并刷新页面，标题文字将在其父容器宽度范围内居中对齐。</p>
<h2>二、使用CSS margin自动外边距</h2>
<p>对设置了固定宽度的标题元素，可通过设置左右外边距为auto，结合display: block，触发块级元素的居中机制。此方式依赖显式宽度设定。</p>
<p>1、为标题元素添加内联样式或CSS类，例如</p>
<h3 style="width: 300px; margin: 0 auto;">居中标题</h3>。
<p>2、确保该标题为块级元素（默认即为block），且未设置float或position: absolute等干扰居中的属性。</p>
<p>3、浏览器会自动计算左右margin值，使元素在父容器中水平居中。</p>
<h2>三、使用Flexbox布局</h2>
<p>将标题的父容器设为flex容器，并应用justify-content: center，可精确控制标题在其容器内的主轴对齐方式。该方法现代、灵活，兼容性良好（IE10+）。</p>
<p>1、包裹标题的父元素添加class，例如</p>
<h4>Flex居中标题</h4>。
<p>2、在CSS中定义：.title-container { display: flex; justify-content: center; }。</p>
<p>3、无需指定标题宽度或浮动，标题将自动在父容器内水平居中。</p>
<h2>四、使用Grid布局</h2>
<p>通过将父容器设为grid容器，并利用place-items: center，可同时实现水平与垂直居中。若仅需水平居中，可单独使用justify-items: center。</p>
<p>1、创建包含标题的容器，例如<section class="grid-title"><h5>Grid标题</h5></section>。</p>
<p>2、为其添加CSS：.grid-title { display: grid; justify-items: center; }。</p>
<p>3、标题元素将依据网格轨道，在容器内沿行方向居中对齐。</p>
<h2>五、使用绝对定位配合transform</h2>
<p>对需要脱离文档流的标题，可采用绝对定位结合transform: translateX(-50%)的方式，以自身宽度50%为<img src="//public-space.oss-cn-hongkong.aliyucs.com/gz/587.jpg" />偏移基准实现居中。需注意父容器相对定位设置。</p>
<p>1、为标题父容器添加position: relative样式。</p>
<p>2、为标题元素设置position: absolute; left: 50%; transform: translateX(-50%);。</p>
<p>3、此时标题左边缘位于父容器中心，再向左平移自身宽度一半，达到视觉居中效果。</p>
