社交分享图标栏必须用 position: fixed + top: 50% + transform: translateY(-50%) 实现垂直居中，left: 20px 避免遮挡，z-index ≥ 100 防覆盖，禁用 width/height 100%，移动端建议隐藏，图标文字组合需用 flex + align-items: center。
社交分享图标栏不是单个元素，而是多个图标组成的垂直栏，直接套用 margin: 0 auto 或 text-align: center 都会失效——它需要的是容器级定位控制，不是内容对齐。
固定左侧栏的容器必须用 position: fixed + top: 50% + transform: translateY(-50%)
这是实现“视觉垂直居中”的唯一可靠方式。用 top: 50% 把容器上边缘锚定在视口中间，再用 transform: translateY(-50%) 向上拉回自身高度的一半，完全避开手动计算高度、响应式塌缩、字体度量干扰等问题。
-
left: 20px比left: 0更安全，避免被浏览器滚动条遮挡或贴边压迫 - 必须设
z-index: 100（或更高），否则会被轮播图、弹窗、导航栏盖住 - 禁用
width: 100%和height: 100%，否则容器会撑满整个视口，图标栏就“变宽”了 - 移动端建议用
@media (max-width: 768px)直接display: none，小屏上留白+误触成本远高于价值
图标和文字组合必须用 display: flex + align-items: center
vertical-align: middle 在这里基本不可靠：图标可能是 <svg>、<i class="fab fa-weibo"> 或 <img>，它们的基线、上升部、下降部高度不一致，vertical-align 对齐的是行框中线，不是视觉中心。
- 把每个图标+文字包进一个
<div class="icon-text">，里面直接放<svg>和<span>微博</span>，不用额外包裹 - CSS 中写
.icon-text { display: flex; align-items: center; gap: 8px; white-space: nowrap; } - 如果用字体图标（如 Font Awesome），确保其
font-size和文字一致，否则视觉上仍会偏高 - 避免给父容器设
float或display: inline-block，否则会覆盖display: flex
整个图标栏要在导航栏里同行对齐？先检查 HTML 结构是否落在栅格单元内
如果你的社交图标出现在导航栏右侧但明显“掉行”或错位，大概率是结构没嵌套进 Pure CSS、Bootstrap 或其他栅格系统的列容器里。比如 Pure CSS 要求：<div class="pure-u-1-3"> 必须包裹社交图标列表，否则 <ul class="pure-menu-list"> 会脱离网格流，位置失控。
立即学习“前端免费学习笔记（深入）”；
- 导航栏三列布局：左（Logo）、中（菜单）、右（社交）——每列都必须是
.pure-u-1-3或对应比例的列容器 - 不要把
<ul>直接丢进<div class="pure-g">，它不是“可直挂”的子项 - 检查 DevTools 中该图标栏的 computed
display和position，确认没被外层样式意外覆盖
真正容易被忽略的点是：固定定位栏的 top 值依赖视口，而页面有滚动时，它不会随内容滚动——所以它和导航栏的“同行对齐”本质是两个坐标系的事；想让两者视觉同步，要么放弃固定定位改用 sticky，要么接受它们物理上不在同一布局流里。
