table居中显示_「CSS三种居中方案全解」CSS垂直居中常用方法集结
一、CSS 垂直居中
1、父元素display:table-cell;vertical-align:center，里面的子元素就会实现垂直居中，不需要知道子元素的宽高
/* HTML */复制代码- 效果展示
2、absolute+margin:auto，定位为 absolute 的元素垂直居中，不需要知道该元素的宽高
复制代码- 效果展示
3、absolute+负margin，定位为 absolute 的元素垂直居中，需要知道该元素的宽高
复制代码- 效果展示
4、absolute+calc(css3计算属性)，定位为 absolute 的元素垂直居中，需要知道该元素的宽高
复制代码- 效果展示
5、absolute+transform，定位为 absolute 的元素垂直居中，不需要知道元素的宽高
复制代码- 效果展示
6、line-height，父元素：line-height=height。子元素：display:inline-block。子元素垂直居中，不需要知道子元素的宽高
复制代码- 效果展示
7、flex，目前主流的布局方案，父元素为 flex 容器且添加 align-items: center，控制子元素的布局。不需要知道子元素的宽高
复制代码- 效果展示
8、grid ，目前最强大的布局方案，使用还尚未流行。父元素为 grid，子元素添加 align-self: center。不需要知道子元素的宽高
复制代码- 效果展示
9、伪元素after或before，这是我搜出来整理的。CSS 真的太神(s)奇(d)了，毫无道理。子元素垂直居中不需要知道宽高
复制代码- 效果展示
10、隐藏节点(盒子)实现 该原理就是使用盒子占位置，但不显示出该盒子。另外的盒子垂直居中，子盒子的宽高需由实际计算时确定
复制代码- 效果展示
11、writing-mode，这是搜索整理而来，参考资料见最后。子元素盒子 display: inline-block。子元素垂直居中，不需要知道该盒子的宽高
复制代码- 效果展示
三、参考资料
作者：soloplayer
链接：https://juejin.cn/post/6904138129612439560
来源：掘金
table居中显示_「CSS三种居中方案全解」CSS垂直居中常用方法集结相关推荐
- php页面底部信息居中,css底部如何局中？css三种居中方法
本篇文章给大家带来的内容是关于css底部如何局中?css三种居中方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 某天组长让我改一个表格的样式,要求底部局中.当时想很简单的嘛,哼哧 ...
- 表格在整个html居中显示,html 表格字符居中显示_如何在HTML中居中显示表格？
html 表格字符居中显示_如何在HTML中居中显示表格? html 表格字符居中显示_如何在HTML中居中显示表格? html 表格字符居中显示 HTML table provides the ab ...
- java怎么让窗口居中显示图片_Java_Swing中让窗口居中显示的方法（三种方法）
方法一: int windowWidth = frame.getWidth(); // 获得窗口宽 int windowHeight = frame.getHeight(); // 获得窗口高 Too ...
- extend implements多个对象_「每天三分钟跟我学Java」之Java面向对象的封装、继承、多态...
Java是面向对象的语言,深入理解面向对象的概念,对Java的开发至关重要.本节我们着重看下面向对象的三大特性,封装.继承.多态. 一.封装 封装是将类的某些信息隐藏在类内部,不允许外部程序直接访问, ...
- java for 循环中if判断只进入第一个_「每天三分钟跟我学Java」之条件语句和循环结构...
在实际项目中,条件判断和循环结构都是使用频率非常高的知识点,本节我们来看下这两部分. 一.条件语句 条件语句是对一个布尔型表达式进行判断,true时执行一个分支的操作,false时执行另一个分支的操作 ...
- CSS三种写法的优先级
在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
- 简述css样式的三种引入html的方式,css-1,css的三种引入方式 基本选择器
css三种引入方式 和四种基本选择器 /*内接样式*/ /*1 选择器 选中的是 '共性'*/span{color:green;font-size:30px; } /*组合选择器*/ul,ol{lis ...
- 8cm等于多少像素_「前端剑指offer第5期」物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么...
# 提问 物理像素.逻辑像素.CSS像素.PPI.设备像素比是什么? # 回答 物理像素代表屏幕上有多少个点,比如1080x2340表示屏幕一排包含1080个物理像素点. 逻辑像素表示屏幕展示物体的视 ...
- CSS三种样式表 内部样式表、行内部样式表、外部引用
目录 CSS三种样式表 1.内部样式表 2.行内部样式表 3.外部引用: CSS三种样式表 1.内部样式表 2.行内样式表(内联式) 3.外部样式表(外链式) 1.内部样式表 内嵌式:将CSS代码集中 ...
最新文章
- 机器学习数据拆分_解释了关键的机器学习概念-数据集拆分和随机森林
- 在 Kubuntu 21.04 中安装和升级 KDE Plasma 5.2
- SQL语句修改字段类型与第一次SQLServer试验解答
- 微信公众号开发小记——4.两种邀请用户的方式 扫码链接
- 宽带651以及光猫红色灯闪烁-故障维修
- PHP调整图片饱和度,window_Win10系统电脑屏幕的饱和度如何调整?，什么是饱和度？ 对电脑来说 - phpStudy...
- C++数据与我们转移过空间之后
- 补习系列(17)-springboot mongodb 内嵌数据库
- mysql capi函数详解_技术分享|MySQLCAPI参数MYSQL_OPT_READ_TIMEOUT的一些行为分析
- 日常邮件用语（一）网摘学习
- 项目范围管理论文提纲
- icem合并面网格_ICEM CFD中合并多个网格
- OpenStack部署(未完成)
- 你真的理解devDependencies和dependencies区别吗?
- krait和kryo_高通kryo架构还是arm吗
- Rmxprt Maxwell 生成2D和3D全模型方法
- 怎么注册公司邮箱？公司邮箱注册流程介绍
- Linux arping命令测试IP地址冲突
- 【亲测】独家更新CcPay多商户码支付系统,码支付易支付+个人支付宝微信二维码收款app监控+搭建教程
- 国家标准，行业标准文件