CSS实现垂直居中
1.flex布局
先渲染出一个正方形
<body> <div class="box"></div> </body>
<style> .box{ width: 300px; height: 300px; background-color: red; } </style>
将元素的父类设置flex布局
<style> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; } body{ display: flex; justify-content: center; align-items: center; } </style>
效果如图
2.定位
<style> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; } .box{ width: 300px; height: 300px; background-color: red; margin: 0 auto; //实现水平居中 position: relative;//相对定位 top: calc(100vh/2);//顶部高度为屏幕的一半 transform: translateY(-50%);//沿Y周向上移元素的一半 } </style>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步