分页器底部居中需对整组按钮整体水平居中并固定定位到底部，而非对单个链接设text-align:center；正确做法是父容器用position:fixed+width:100%+flex布局，justify-content:center实现居中。

分页器在页面底部居中，本质是「整组按钮」的水平居中 + 固定定位到底部，不是给每个 或 单独加 text-align: center——那根本没用。

为什么 text-align: center 对分页器无效

因为 默认是行内元素，text-align: center 只控制它内部的文字对齐，不控制它自己在父容器里的位置。你给父

加了 text-align: center，但所有分页链接还是从左往右挨着排，视觉上完全没居中。

• 真正要居中的是这一整组按钮（比如「上一页 1 2 3 … 下一页」），不是单个链接
• text-align 只作用于块级容器内的行内内容，对子元素的布局位置无影响
• 如果父容器宽度没撑开（比如没设 width: 100% 或没脱离文档流），居中更无从谈起

position: fixed + flex 是最稳方案

固定定位到底部，再用 Flex 控制内部按钮整体居中，兼容性好、语义清晰、不易被干扰。

• 给分页容器设 position: fixed; bottom: 0; left: 0; width: 100%; —— 确保它横跨整个视口底部
• 再加 display: flex; justify-content: center; —— 让整组按钮水平居中
• 可选：加 padding: 8px 0; 和 background 提升可读性与视觉分隔
• 避免用 margin: 0 auto，因为它对 position: fixed 元素无效（脱离文档流后，auto 失去参照）

常见踩坑点：打印或滚动时页脚错位

如果你的分页器同时用于打印场景，position: fixed 会在每一页都渲染一次，导致末页底部出现多个重复页脚。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 浏览器打印引擎（尤其是 Chromium）对 @page 和 fixed 的支持有限，无法自动识别“只在末页显示”
• 若需精准控制末页页脚，必须拆出独立容器 + 强制分页（如 page-break-before: always;）+ Flex 垂直对齐
• 普通网页浏览场景下，fixed + flex 完全够用；但一旦涉及分页打印，就得放弃 fixed，改用内容流内布局 + min-height: 100vh 配合 flex: 1

真正难的不是写几行 CSS，而是分清你要居中的对象：是文字？是单个链接？还是一整组按钮。搞错对象，再对的属性也白搭。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！