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

相关推荐
顾安r20 分钟前
11.14 脚本网页 青蛙过河
服务器·前端·python·游戏·html
不爱吃糖的程序媛1 小时前
Electron 智能文件分析器开发实战适配鸿蒙
前端·javascript·electron
Doro再努力1 小时前
2025_11_14洛谷【入门1】数据结构刷题小结
前端·数据结构·算法
IT_陈寒1 小时前
SpringBoot 3.2新特性实战:这5个隐藏技巧让你的应用性能飙升50%
前端·人工智能·后端
eason_fan2 小时前
Monorepo性能噩梦:一行配置解决VSCode卡顿与TS类型崩溃
前端·typescript·visual studio code
天天进步20152 小时前
Webpack到Vite:构建工具迁移实战经验总结
前端·webpack·node.js
0***143 小时前
免费的WebAssembly模块打包,Webpack配置
前端·webpack·wasm
小胖学前端3 小时前
解决 uniapp H5 与原生应用通信的坑:一个经过实战验证的解决方案
前端·uni-app
LaoZhangAI3 小时前
Gemini 2.5 Flash Image API尺寸设置完整指南:10种宽高比详解
前端·后端
kangyouwei3 小时前
鸿蒙开发:19-本地开发配置bash环境执行hvigorw命令
前端·harmonyos