CSS垂直居中的8种方法
1、通过verticle-align:middle实现CSS垂直居中。
通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的前提是元素的display:inline-block。
2、通过display:flex实现CSS垂直居中。
随着越来越多浏览器兼容CSS中的flexbox特性,所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;
这个跟CSS水平居中的原理是一样的,只是在flex-direction上有所差别,一个是row(默认值),另外一个是column。
3、通过伪元素:before实现CSS垂直居中。
具体方式是为父元素添加伪元素:before,使得子元素实现垂直居中。
4、通过display:table-cell实现CSS垂直居中。
给父元素display:table,子元素display:table-cell的方式实现CSS垂直居中。
5、通过隐藏节点实现CSS垂直居中。
创建一个隐藏节点#hide,使得隐藏节点的height值为剩余高度的一半即可。
这种方法也适用于CSS水平居中,原理一样。
6、已知父元素高度通过transform实现CSS垂直居中。
给子元素的position:relative,再通过translateY即可定位到垂直居中的位置。
7、到垂直居中的位置。
8、通过line-height实现CSS垂直居中。
设置子元素的line-height值等于父元素的height,这种方法适用于子元素为单行文本的情况。
CSS垂直居中的8种方法相关推荐
- 高度不定垂直居中_经典:CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网 我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
- css 图文 上下 居中,CSS垂直居中的6种方法
垂直居中一直是CSS布局中比较令人头疼的问题,相比于水平居中,垂直居中对于不同的元素类型需要采取截然不同的策略,因此常常会因为策略的误用导致无法成功居中.这篇文章总结了垂直居中的6种常见策略. Ver ...
- CSS 垂直居中的七种方法——史上最详细总结
博主目前在蚂蚁集团-体验技术部,AntV/S2 是博主所在团队的开源项目--多维交叉分析表格,欢迎使用,感谢到 S2 github 仓库点赞 star,有任何关于前端面试.就业.技术问题都可给在文章后 ...
- 经典:CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网 我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
- CSS垂直居中的6种方法
垂直居中一直是CSS布局中比较令人头疼的问题,相比于水平居中,垂直居中对于不同的元素类型需要采取截然不同的策略,因此常常会因为策略的误用导致无法成功居中.这篇文章总结了垂直居中的6种常见策略. 1.V ...
- Html+CSS垂直居中的N种方法(大全)
1. absolute + margin auto 利用元素 position: absolute 和 margin: auto实现垂直居中,适用于父子盒子里. 代码: .parent{positio ...
- 使用 CSS 实现垂直居中的8种方法
CSS垂直居中的8种方法 目录 CSS垂直居中的8种方法 1.通过vertical-align:middle实现CSS垂直居中. 2.通过display:flex实现CSS垂直 ...
- html怎么把元素垂直居中显示,分享html css元素垂直居中的几种方法
元素垂直居中的几种方法: 方法一:设置height和line-height 在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置 ...
- CSS实现垂直居中的7种方法
CSS实现垂直居中的7种方法 1.设定行高(line-height) 2.设置伪元素::before 3.absolute + transform 4. 设置绝对定位 5.设置display:flex ...
最新文章
- 用实例揭示notify()和notifyAll()的本质区别
- 安装batocera-linux教程_利用Grub2Win安装Batocera+Windows7双系统甚至多系统实战教程
- 分别用matlab和python计算物品相似度矩阵(Jaccard系数
- wordpressQQ登陆php代码_WordPress实现前台登录功能
- 用sql的select语句从数据库中获取数据
- android高仿ios11系统,安卓仿ios11桌面全套文件
- 计算身份证号码的校验码Python
- 传感器系列之4.6雨滴传感器
- GIS中常用专业英文术语
- 光学三原色与色的三原色
- iOS 关于音乐锁屏控制音乐(锁屏信息设置)
- 移动网络简介与RRC
- centos7 pe系统安装_如何用U盘安装CentOS7系统
- 为什么推荐使用hooks,它有什么好处?
- C++语法——详细剖析多态与虚函数
- 学习mathematica(三)——基本数学运算
- 如何在SpringWEB项目或者Springboot启动时直接执行业务代码(三种方式)
- java mavlink_简介 · MAVLink Developer Guide
- 陇原战役2021 ezjaba
- 手写小程序:字符串分隔
热门文章
- 关联GIS:条条道路通UE5城
- [ Linux ] 如何查看Linux系统版本
- 【主题词——牡丹花】
- 2021年副高考试成绩查询兵团,2021年新疆兵团公务员笔试成绩查询入口
- c语言spp,SPP(Spatial Pyramid Pooling)详解
- Matlab plot函数画图间隔标记
- 命令行工具不起作用-OS X El Capitan,Sierra,High Sierra,Mojave
- spotify使用教程_使用JavaScript构建Spotify的着色器效果
- 如何判断实用新型专利是否构成侵权
- c语言createfile函数,c ++ CreateFile函数错误[关闭](c++ CreateFile function error [closed])