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