或者更换一下宽度width为400px及背景颜色内容，效果又如：
上述代码中，我们要先使用display: flex;属性，让盒子具有弹性布局的属性。
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
设置flex属性值为1则表示让所有弹性盒模型对象的子元素都有相同的长度。
设置align-items属性值为center则表示元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
推荐参考：《CSS教程》
本篇文章就是关于css实现弹性盒子中元素居中对齐的效果介绍，也很简单，希望需要的朋友有所帮助！
以上就是CSS怎么实现弹性盒中的元素居中对齐的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
更多相关阅读请进入《CSS弹性盒元素居中对齐》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
