【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%,此时子元素的中心和父元素的中心刚好重合,即实现垂直水平居中
相关推荐
李少兄2 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1013 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19433 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧4 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台4 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1004 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc5 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
繁花与尘埃6 小时前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
吃饺子不吃馅6 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
theOtherSky6 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节