【CSS】垂直水平居中

经常会遇到各种情况下,比如具体不定宽高的元素,但是需要让元素垂直水平居中,这种情况下,有很多种方式,常用写法如下:

flex实现

javascript 复制代码
// 父元素
display: flex;
justify-content: center;
align-items: center;

table实现

javascript 复制代码
// 父元素
display: table-cell;
vertical-align: middle;
text-align: center;

CSS3实现

javascript 复制代码
// 父元素
position: relative; 

// 子元素
position: absolute;
top: 50%; // 将子元素左上角与父元素中心对齐,距离父元素上边缘50%距离
left: 50%; // 将子元素左上角与父元素中心对齐,距离父元素左边缘50%距离
transform: translate(-50%, -50%); 将子元素向左边平移子元素宽度的50%,向上边平移子元素宽度的50%,此时子元素的中心和父元素的中心刚好重合,即实现垂直水平居中
相关推荐
满分观察网友z几秒前
富文本解析终极指南:从Quill到小程序,我如何用正则摆平所有坑?
前端
打野赵怀真几秒前
在TypeScript中装饰器有哪些应用场景?
前端·javascript
destinying2 分钟前
vite学习笔记
前端·javascript
LRH3 分钟前
JS基础 - 手写数组扁平化函数
前端·javascript
共享ui设计和前端开发人才6 分钟前
UI前端与数字孪生结合探索:智慧建筑的能耗管理与优化
前端·ui·状态模式
FogLetter7 分钟前
从零到一实现流式输出:SSE技术在前端应用中的魔法时刻
前端·javascript
G等你下课7 分钟前
如何进行DOM操作?
javascript·html
薄荷糖丶8 分钟前
一些关于CSS动画的领悟
前端
用户8168694747259 分钟前
基于Generator的async/await实现机制
前端
Cache技术分享11 分钟前
124. Java 泛型 - 有界类型参数
前端·后端