如何用CSS实现动态居中的头部导航栏

嘿，这个需求其实很容易搞定！你已经给#header用上了flex布局，现在只差一个关键属性就能让.box元素始终保持居中——不管你加多少个或者删多少个.box，都能稳稳待在头部栏的正中间。

修改后的完整代码 #

CSS 部分

#header { 
  display: flex; 
  align-items: center; /* 已经实现垂直居中 */
  justify-content: center; /* 新增：实现水平居中 */
  height: 60px; 
  background: gray; 
} 
.box { 
  width: 32px; 
  height: 32px; 
  margin: 0 5px; 
  background: red; 
  /* 可选：让.box内部的数字也居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML 部分

<div id="header"> 
  <div class="box">1</div> 
  <div class="box">2</div> 
  <div class="box">3</div> 
</div>

原理说明 #

• 你原本的align-items: center已经帮你搞定了垂直方向的居中，而新增的justify-content: center负责水平方向的居中，两者搭配就实现了完全居中的效果。
• Flex布局天生支持动态适配子元素数量：不管你添加还是移除.box，#header都会自动重新计算子元素的排列空间，始终把它们放在容器的中心位置，完全不用额外写JS或者调整其他样式。

如果不需要.box内部的数字居中，把.box里那三行flex相关的样式删掉就行，不影响整体居中效果。

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