答案：通过设置display: flex，结合align-items和justify-content实现垂直水平居中。具体为：1. 垂直居中用align-items: center；2. 完全居中加justify-content: center；3. 多元素纵向居中使用flex-direction: column并配合justify-content与align-items。
要使用 CSS Flex 实现垂直居中布局，关键在于将父容器设置为 Flex 容器，并利用 align-items 和 justify-content 属性控制子元素在交叉轴和主轴上的对齐方式。
1. 基本垂直居中（单行元素）
如果只想让子元素在容器中垂直居中（沿交叉轴），可以使用 align-items: center。
.container { display: flex; align-items: center; /* 垂直居中 */ height: 300px; /* 需要有高度才能看到效果 */}
这个方法适用于文本、按钮等单行内容的垂直居中。
2. 完全居中（垂直 + 水平）
如果需要同时实现垂直和水平居中，加上 justify-content: center 即可。
立即学习“前端免费学习笔记（深入）”；
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
218 查看详情 
.container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ height: 300px; width: 100%;}
这种方法适合模态框、登录框、提示弹窗等需要在页面正中间显示的内容。
3. 多个子元素垂直居中排列
当有多个子项时，默认会横向排列。若希望它们纵向堆叠并各自垂直居中，可以改变主轴方向。
.container { display: flex; flex-direction: column; align-items: center; /* 水平居中（在纵轴布局中变为水平对齐） */ justify-content: center; /* 垂直居中 */ height: 400px;}
这种布局常用于移动端竖屏内容展示或列表项的居中排布。
基本上就这些。只要记住 align-items 控制交叉轴（通常为垂直方向），justify-content 控制主轴方向，再根据需要调整 flex-direction，就能灵活实现各种居中效果。
以上就是如何用css flex实现垂直居中布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1015923.html
微信扫一扫 
支付宝扫一扫 
