使用Flexbox实现两栏居中对齐最有效，1. 整体居中：父容器设display: flex，justify-content: center实现水平居中，align-items: center实现垂直居中；2. 仅水平居中：使用justify-content: center配合gap设置间距，flex: 0 0 45%控制列宽；3. 响应式堆叠：屏幕小于768px时，flex-direction: column使两栏垂直排列，align-items: center保持居中，width: 80%和text-align: center适配移动端。关键在于理解主轴与交叉轴的对齐控制。
要实现网页两栏内容在容器中居中对齐，使用 Flexbox 是最简单高效的方式。通过 justify-content 和 align-items 两个属性，可以分别控制主轴和交叉轴上的对齐方式。
1. 水平与垂直居中（整体居中）
如果你希望两栏内容作为一个整体，在父容器中水平和垂直居中，可以这样设置：
• 父容器设为 flex 布局• 使用 justify-content 居中水平方向
• 使用 align-items 居中垂直方向
示例代码：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 容器高度示例 */
}
.column {
width: 40%;
padding: 20px;
}
此时两个栏位会并排居中显示在页面中央。
立即学习“前端免费学习笔记（深入）”；
2. 两栏等宽分布并水平居中（不强调垂直位置）
如果只需要水平居中分布两栏，而垂直方向不需要特别居中，可只使用 justify-content：
• justify-content: space-around / space-between / center• 可配合 flex-direction: row 控制横向排列
例如让两栏靠中间紧密排列：
.container {
display: flex;
justify-content: center;
gap: 20px; /* 栏间距 */
}
.column {
flex: 0 0 45%; /* 固定宽度，避免拉伸 */
}
3. 响应式考虑：小屏幕下堆叠居中
在移动设备上，通常希望两栏变为上下堆叠，并依然保持居中对齐：
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center; /* 垂直方向变为主轴后，用 text-align 或 width 控制宽度居中 */
}
.column {
width: 80%;
text-align: center;
}
}
基本上就这些。利用 justify-content 处理主轴对齐、align-items 控制交叉轴，再结合响应式调整，就能灵活实现各种居中布局。关键是理解两者的轴向作用范围。不复杂但容易忽略细节。
