body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px;background-color:#ddd;justify-content:center;align-items:center;} .item{padding:6px;width:200px;height:200px;} .item1{background-color:#372;} .item2{background-color:#484;}
<div class="flex-container"> <div class="item item1">item1</div> <div class="item item2">item2</div> </div>
justify-content:定义项目在主轴上的对其方
align-items:定义项目在交叉轴上的对齐方式。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步