【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%,此时子元素的中心和父元素的中心刚好重合,即实现垂直水平居中
相关推荐
黑客老陈30 分钟前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安35 分钟前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
暴富的Tdy1 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se1 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
m0_748235611 小时前
web 渗透学习指南——初学者防入狱篇
前端
℘团子এ1 小时前
js和html中,将Excel文件渲染在页面上
javascript·html·excel
z千鑫1 小时前
【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js
m0_748250742 小时前
Web入门常用标签、属性、属性值
前端