2、在 CSS 中设置该容器的 width 属性为具体像素值或最大宽度，例如 width: 800px。
立即学习“前端免费学习笔记（深入）”；
3、设置 margin: 0 auto，即上、下外边距为 0，左右外边距由浏览器自动分配。
二、使用 text-align: center 配合 inline-block
该方法适用于将内部行内元素或行内块级元素整体居中，需确保父容器的文本对齐方式设为居中，并将子元素转为行内块以受 text-align 控制。
1、为包裹正文的父容器（如 或 ）设置 text-align: center。
2、为正文内容最外层的直接子元素（如 ）添加 display: inline-block 样式。
3、为该子元素设置 text-align: left，避免内部文字也被居中对齐。
三、使用 Flexbox 布局
该方法利用弹性盒子模型，通过设置父容器为 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%，完成视觉居中。四、使用 Grid 布局
五、使用绝对定位配合 transform
830
收藏
