HTML5页面正文水平居中可通过五种CSS方法实现：一、margin:0 auto配固定宽度；二、text-align:center配inline-block；三、Flexbox的justify-content:center；四、Grid的place-items:center；五、绝对定位加transform平移。
如果您希望HTML5页面中的正文内容在浏览器窗口中水平居中显示，则可能是由于默认文档流或未设置适当的CSS定位规则导致内容靠左对齐。以下是实现正文内容居中布局的多种方法：
一、使用 margin: 0 auto 配合固定宽度
该方法通过为块级元素设置左右外边距为 auto，并指定明确的宽度，使浏览器自动计算并均分左右空白区域，从而实现水平居中。
1、为正文容器（如 <main> 或 <div class="content">）添加 CSS 类名或内联样式。
2、在 CSS 中设置该容器的 width 属性为具体像素值或最大宽度，例如 width: 800px。
立即学习“前端免费学习笔记（深入）”；
3、设置 margin: 0 auto，即上、下外边距为 0，左右外边距由浏览器自动分配。
二、使用 text-align: center 配合 inline-block
该方法适用于将内部行内元素或行内块级元素整体居中，需确保父容器的文本对齐方式设为居中，并将子元素转为行内块以受 text-align 控制。
1、为包裹正文的父容器（如 <body> 或 <section>）设置 text-align: center。
2、为正文内容最外层的直接子元素（如 <article>）添加 display: inline-block 样式。
3、为该子元素设置 text-align: left，避免内部文字也被居中对齐。
三、使用 Flexbox 布局
该方法利用弹性盒子模型，通过设置父容器为 flex 容器并指定主轴对齐方式，可精准控制子元素在水平和垂直方向上的居中位置。
1、选择正文内容的直接父容器（如 <body> 或自定义 <div id="wrapper">）。
2、为其添加 CSS 属性 display: flex。
3、添加 justify-content: center 实现主轴（水平）居中。
4、如需同时垂直居中，补充 align-items: center 并确保父容器具有明确高度（如 min-height: 100vh）。
四、使用 Grid 布局
该方法通过定义网格容器与网格项的关系，以声明式方式实现单个子元素的完全居中，无需依赖内容尺寸或额外嵌套。
1、将正文容器的父元素设为网格容器，添加 display: grid。
2、设置 place-items: center，等效于同时设置 justify-items: center 和 align-items: center。
3、确保正文容器是该网格容器的唯一直接子元素，或使用 grid-area 显式指定其位置。
五、使用绝对定位配合 transform
该方法通过脱离文档流的定位方式，结合位移变换实现精确居中，适用于需要脱离常规布局流的场景。
1、为正文容器的父元素设置 position: relative，作为定位参考上下文。
2、为正文容器本身设置 position: absolute。
3、设置 left: 50% 和 top: 50%，将其左上角锚点移至父容器中心。
4、添加 transform: translate(-50%, -50%)，将自身向左、向上平移自身宽高的 50%，完成视觉居中。
