css 垂直+水平居中
2024-09-03 14:25:30
垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论
1.父盒子固定高度[定位]
实现1:
father-box: position:relative
child-box:position:absolute+left:50%+top:50%+translate(-50%,-50%)
实现2:
father-box:position:relative
child-box: position:absolute+top:0+right:0+bottom:0+left:0+margin:auto
2.父盒子不固定高度[弹性盒子]
实现1:
father-box:display:table
child-box:display:table-cell+vertical-align:middle+text-align:center
实现2:
father-box:display:flex+align-items:center+justify-content:center
child-box:flex:1
最新文章
- linux一些常用命令
- 【目录】Matlab和C#混合编程文章目录
- .NET框架体系结构
- 重要选择器querySelector和querySelectorAll
- paper 69:Haar-like矩形遍历检测窗口演示Matlab源代码[转载]
- CSS链接、光标、DHTML、缩放
- JQuery 拖动层
- em,strong,b,i的区别
- Java中基本数据类型和包装类
- dubbox系列【二】——dubbox admin环境搭建
- 【转载】 Spark性能优化:资源调优篇
- 2018-2019 ACM-ICPC, Asia Nanjing Regional Contest
- 关闭PHP的opcache缓存
- Python环境搭建详解(Window平台)
- [ErrorException] ";continue"; targeting switch is equivalent to ";break";. Did you mean to use ";continue 2";?
- day12 生成器和各种推导式
- rsync本地及远程复制备份【原创】
- OC基础数据类型-NSValue
- Django的视图响应类型
- 【黑金原创教程】【TimeQuest】【第一章】TimeQuest 静态时序分析模型的概念