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

相关推荐
霪霖笙箫1 分钟前
「JS全栈AI学习」十一、Multi-Agent 系统设计:可观测性与生产实践
前端·面试·全栈
ZC跨境爬虫4 分钟前
3D 地球卫星轨道可视化平台开发 Day12(解决初始相位拥挤问题,实现卫星均匀散开渲染)
前端·javascript·算法·3d·json
踩着两条虫7 分钟前
VTJ.PRO 企业级应用开发实战指南
前端·人工智能·低代码·重构·架构
用户5757303346248 分钟前
🚀 别再让浏览器“负重跑”了!手把手教你用 IntersectionObserver 实现图片懒加载
前端
胖纳特15 分钟前
从零到一:OnlyOffice中国版企业级完整落地指南
前端·后端
jrlong20 分钟前
HelloAgents 进阶篇 task03
java·前端·python
搬砖的前端21 分钟前
本地模型+TRAE CN 打造最优模型组合实测:开源主模型+本地辅模型,对标GPT5.2/5.3/Gemini-3-Flash
前端·ai·mac·ai编程·qwen·trae·qwen3.6
talen_hx29625 分钟前
飞书机器人发文本消息
java·前端·飞书
freewlt29 分钟前
前端工程化性能监控体系建设:从0到1实战指南
前端
Mintopia31 分钟前
别再一上来就分层:新手最容易做错的系统设计决定
前端