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

相关推荐
YG亲测源码屋2 分钟前
html表白代码大全可复制免费 html表白网页制作源码
前端·html
夜雪闻竹6 分钟前
React Query + REST API 最佳实践
前端·react.js·前端框架
段ヤシ.7 分钟前
回顾Java知识点,面试题汇总Day12:tomcat、 Java Web(持续更新)
java·前端·tomcat·java web
JAVA学习通8 分钟前
从 Bean 到微服务:一张图吃透 Spring 全家桶底层原理
java·前端·spring
古韵10 分钟前
前端请求库的下一个进化方向:从 Promise 到策略化
前端
独特的螺狮粉12 分钟前
蛋鸡养护周期管理系统 - 鸿蒙PC Electron框架完整实现指南
前端·javascript·华为·electron·前端框架·开源·鸿蒙
忧郁的蛋~16 分钟前
ASP.NET Core Web API 完全指南:请求管道、认证、错误处理到生产部署
前端·后端·asp.net·.net
我穿棉裤了26 分钟前
解决el-form表单校验时显示的红色星号与文字对齐的问题
前端·javascript·vue.js
copyer_xyf28 分钟前
Python 类全面总结
前端·后端·python
copyer_xyf32 分钟前
Python 类型注解:从 TypeScript 迁移理解
前端·后端·python