CSS如何让两元素并排对齐并居中？仿站时导航栏与内容块居中问题

• 外层容器已经启用flex弹性布局，但子元素上保留了float: right、负外边距、vertical-align这类普通文档流的属性，这些属性在flex布局下完全失效，甚至会直接打乱弹性排版的位置计算
• 外层容器直接设置为100%宽度，没有设置最大宽度和自动外边距，导致整个内容块贴满视口左右边缘，天然不具备居中的基础
• 硬给两个子元素设置50%宽度，没有预留内容间距，加上负margin的位置偏移，最终会出现导航和文章错位、排版零散的问题
• 直接给全局div标签绑定样式，会让页面上所有div都被强制应用flex规则，很容易打乱页头、页脚等其他模块的正常排版

1. 移除所有冲突的冗余样式 #

把现有代码里和flex布局逻辑打架的属性全部删掉：

• 删除article选择器下的float: right、margin-top: -250px、vertical-align: top
• 删除nav选择器下的vertical-align: top
• 收回全局div标签上的flex样式，给包裹导航和文章的容器单独设置类名做样式隔离

2. 重构外层容器的居中逻辑 #

不要让容器直接占满100%视口宽度，改为适配屏幕的居中容器：

.content-container {
    display: flex;
    flex-direction: row;
    /* 子元素顶部对齐，匹配常规官网的内容排版逻辑 */
    align-items: flex-start;
    /* 设置内容最大宽度，大屏幕下内容不会过度拉伸变形 */
    max-width: 1200px;
    /* 小屏幕下保留左右边距，内容不贴屏幕边缘 */
    width: 90%;
    /* 核心：左右自动外边距，实现整个内容块在视口内水平居中 */
    margin: 0 auto;
    /* 用gap属性控制导航和文章的间距，比硬加padding更灵活 */
    gap: 3rem;
}

3. 调整子元素的宽度适配规则 #

不用硬卡50%的宽度比例，用弹性布局的空间分配逻辑更稳定：

/* 侧边导航 */
nav {
    /* 固定导航宽度，不会被屏幕尺寸挤压变形 */
    flex: 0 0 240px;
    box-sizing: border-box;
}

/* 主文章区 */
article {
    /* 占满容器剩下的所有可用宽度 */
    flex: 1;
    box-sizing: border-box;
}

• 如果需要让导航和文章在容器内垂直方向居中对齐，只需要把容器的align-items值从flex-start改成center即可，完全不需要用负margin硬拉元素位置
• 原来给article设置的padding-right: 80px可以直接替换为容器的gap属性，间距调整更直观，不会出现padding值撑破盒模型的问题

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