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

相关推荐
Bigfish_coding几秒前
前端转agent-第一周【python】-05 Ollama+Qwen3实战:会话记忆实战
前端
x***r1512 分钟前
.NET 10 SDK 安装教程(dotnet-sdk-10.0.100-win-x64详细步骤)
java·服务器·前端
新新技术迷3 分钟前
给 Agent 做"工具调用过程可视化",让用户看见它在干嘛
前端
feixing_fx10 分钟前
选择器的威力——深入理解优先级计算与层叠规则
开发语言·前端·css·前端框架·html
代码小库13 分钟前
【2026前端转 AI 全栈指南】第 1 章:前言 · 后端架构 · 章节导览
前端·人工智能·架构
晓131315 分钟前
【Cocos Creator 3.x】篇——第四章 子系统
前端·javascript·游戏引擎
ikoala24 分钟前
Codex 怎么买、怎么充值?先把这两套计费搞清楚
前端·javascript·后端
wuhen_n1 小时前
RAG 优化实战:检索精准度提升全方案
前端·langchain·ai编程
Mike_jia1 小时前
DataEase:人人可用的开源BI神器,企业数据决策民主化实战指南
前端
lichenyang4531 小时前
从一次“重新发送 / 重新生成”开始,聊聊流式聊天状态机到底解决了什么问题
前端