如何使Header内元素在窗口缩放时保持垂直水平居中？

你的问题根源在于使用了硬编码的top、left等相对定位属性，这类固定数值在窗口大小变化时无法自适应，导致元素错位。改用Flexbox布局可以完美解决这个问题，它天生支持响应式的居中对齐，无需依赖固定像素值。

修改后的CSS代码 #

header {
    position: fixed;
    background: #172135;
    width: 100%;
    height: 10%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex; /* 启用Flex布局 */
    align-items: center; /* 垂直居中所有子元素 */
    padding: 0 2rem; /* 左右留白，避免元素贴边 */
    box-sizing: border-box; /* 确保内边距不超出header宽度 */
} 

#logo {
    width: 4.5%;
    height: auto;
    z-index: 2;
    /* 移除原有的position、top、left属性 */
}
.navigation {
    flex: 1; /* 让导航占满header剩余空间 */
    text-align: center; /* 导航链接水平居中 */
    font-size: 1.2em;
    word-spacing: 3.5em;
    /* 移除原有的position、top属性 */
}

关键调整说明 #

• display: flex：将header转换为Flex容器，子元素（logo和导航）会自动成为Flex项，支持灵活的排列和对齐。
• align-items: center：强制所有子元素在垂直方向上居中，无论窗口高度如何变化，元素都不会偏离垂直中线。
• flex: 1：让导航栏占据header的剩余空间，配合text-align: center实现导航链接的水平居中，同时logo自然靠左排列。
• 移除所有硬编码的定位属性：position: relative、top、left这些固定值是缩放错位的核心原因，Flex布局会自动处理元素位置的自适应。

这样修改后，Header内的元素在窗口缩放时会始终保持垂直水平居中的状态，同时保留你原本想要的布局结构。

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