CSS那些厉害的布局方法

1.超级居中(水平和垂直都居中)

只需要给外层父级元素加上下面代码

复制代码
.parent{
   display: grid;
   place-items: center;
}

2.经典的sidebar布局

复制代码
.parent{
    display: grid;
    grid-template-columns: minmax(150px,25%) 1fr;
}

3.固定的header和footer,中间的内容自适应

复制代码
.parent{
    display: grid;
    grid-template-rows:auto 1fr auto;
}

一些brankproint

相关推荐
浪浪山_大橙子3 分钟前
使用Electron+Vue3开发Qwen3 2B桌面应用:从想法到实现的完整指南
前端·人工智能
狗哥哥6 分钟前
聊聊设计模式在 Vue 3 业务开发中的落地——从一次代码重构说起
前端·架构
shenzhenNBA17 分钟前
如何在python文件中使用日志功能?简单版本
java·前端·python·日志·log
掘金泥石流19 分钟前
分享下我创业烧了 几十万的 AI Coding 经验
前端·javascript·后端
用户479492835691521 分钟前
JavaScript 为什么选择原型链?从第一性原理聊聊这个设计
前端·javascript
new code Boy26 分钟前
vscode左侧栏图标及目录恢复
前端·javascript
唐诗26 分钟前
Git提交信息太乱?AI一键美化!一行命令拯救你的项目历史🚀
前端·ai编程
涔溪42 分钟前
有哪些常见的Vite插件及其作用?
前端·vue.js·vite
糖墨夕42 分钟前
从一行代码看TypeScript的精准与陷阱:空值合并vs逻辑或
前端·typescript
Junsen1 小时前
使用 Supabase 实现轻量埋点监控
前端·javascript