为何Lobby Div间存在间隙？更换Container居中方式可解决

核心问题：子像素渲染的舍入偏差 #

当你用position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);实现容器居中时，这个逻辑会触发浏览器的子像素渲染：

• top:50%和left:50%基于视口尺寸计算，若视宽/视高不是偶数，容器初始位置会是小数像素
• transform: translate(-50%,-50%)基于容器自身尺寸计算偏移，同样可能得到小数像素的偏移值
• 浏览器必须将这些小数像素对齐到屏幕物理像素网格，会做舍入处理，但不同元素的舍入规则不一定一致，相邻.lobby元素之间就会出现肉眼可见的微小间隙

Flex居中为什么能解决？ #

改用Flex布局（给body添加display: flex; justify-content: center; align-items: center;）时，浏览器的布局逻辑完全不同：

• Flex容器会直接将.container在可用空间内精准居中，整个计算过程基于容器实际尺寸，不会触发transform带来的子像素偏移
• 内部.active-lobbies滚动容器和.lobby元素的尺寸计算不会出现舍入偏差，间隙自然消失

你的代码里还有个加剧问题的点 #

你给.active-lobbies设置了height: 36.5vh这种带小数的视口单位，在transform居中的场景下，这种小数尺寸会叠加容器本身的子像素偏移，让舍入偏差更明显，间隙也就更容易被察觉。

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