CSS在动态尺寸父容器中实现垂直居中的问题

嘿，我明白你的困扰——箭头图标现在跟着视口垂直居中，窄屏时完全脱离图片区域，完全没在viewer-wrapper里对齐，这确实挺糟心的。咱们来一步步解决这个问题：

核心问题分析 #

你当前的箭头应该是用了基于视口的定位（比如position: fixed或者top: 50vh这类属性），导致它脱离了父容器viewer-wrapper的布局上下文，所以才会跟着浏览器窗口走，而不是跟着图片容器走。

具体修复步骤 #

1. 给父容器设置相对定位
   首先要让viewer-wrapper成为内部元素的定位基准，给它加上position: relative：

   .viewer-wrapper {
     position: relative;
     /* 保留你原本的其他样式，比如宽度、overflow等 */
   }
   

2. 调整箭头的定位方式
   把箭头的定位改成基于父容器的绝对定位，替换掉原来的视口相关定位：

   .arrow-icon {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     /* 根据你的需求设置左右位置，比如 left: 1rem; 或者 right: 1rem; */
   }
   

3. 确保父容器高度正常
   如果viewer-wrapper没有自动撑开高度，可能需要补充样式让它适配内部图片的高度，比如：

   .viewer-wrapper {
     /* 如果你用flex布局 */
     display: flex;
     align-items: center;
     /* 或者如果是图片容器，确保它能包裹图片 */
     inline-size: fit-content;
   }
   

这样修改后，不管页面宽度怎么缩放，箭头都会牢牢固定在viewer-wrapper的垂直中间位置，再也不会脱离图片啦！

内容的提问来源于stack exchange，提问作者Alex Court