右侧元素在两列布局中垂直居中需确保父容器有明确高度，推荐用flex（display: flex + align-items: center + justify-content: center）、绝对定位+transform（适用于固定尺寸）或table-cell+vertical-align（兼容IE8+），并避免布局冲突。
右侧元素在两列布局中垂直居中，不能只靠 margin: auto 或 text-align: center —— 这些对块级容器内的子元素无效，除非父容器具备明确高度且触发了正确的布局上下文。
用 flex 实现右侧区域整体垂直居中
这是最直接、兼容性足够（现代浏览器及 IE11+）的做法：把右侧容器设为 display: flex，再用 align-items: center 和 justify-content: center。
- 右侧容器必须有明确高度（比如
height: 100vh或继承自父容器的固定高） - 若右侧内容是单个块级元素，无需额外 wrapper；若含多层结构，确保 flex 作用在直接父容器上
- 避免在 flex 容器上同时使用
float或position: absolute，会破坏 flex 布局流
示例：.sidebar { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; }
用绝对定位 + transform 居中（适合固定尺寸内容）
当右侧内容宽高已知，且父容器设置了 position: relative，可用 top: 50% + left: 50% + transform: translate(-50%, -50%)。
- 必须配合
position: absolute，否则top/left不生效 -
transform是关键：它基于自身宽高偏移，不依赖父容器尺寸计算 - 如果右侧内容尺寸动态（如文字行数变化），这个方法会失准，慎用
示例：.sidebar-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
用 table-cell + vertical-align（老项目兼容方案）
IE8+ 支持，但要求右侧容器设为 display: table-cell，且其父容器必须是 display: table，同时设置 vertical-align: middle。
- 父容器需显式设
height，table-cell对百分比高度不敏感 - 该模式下
margin、padding行为异常，float和position会失效 - 无法与 flex 或 grid 混用，容易和外层布局冲突
示例：.sidebar { display: table; height: 100vh; } .sidebar-inner { display: table-cell; vertical-align: middle; text-align: center; }
真正麻烦的地方不在“怎么写”，而在“谁来提供高度”——两列布局里，左侧浮动或 flex 主体常导致右侧父容器高度塌陷。务必确认右侧容器的 height 被正确继承或设定，否则所有垂直居中都会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
