前端秘籍,CSS垂直居中必学八式,一招一式尽显功力
前言
设计网页的时候,除了CSS水平居中的需求外,还会经常遇到CSS垂直居中的需求,CSS垂直居中跟CSS水平居中一样都是前端设计师的基本功。 这篇教程将我以往用过的8种CSS实现垂直居中的方法总结出来,也方便日后再用到时回顾。
工具/原料
CSS3
方法/步骤
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.未知父元素高度通过transform实现CSS垂直居中。 先给父元素position:relative,再给子元素position:absolute,通过translateY即可定位到垂直居中的位置。
8.通过line-height实现CSS垂直居中。 设置子元素的line-height值等于父元素的height,这种方法适用于子元素为单行文本的情况。
注意事项
前三种方法是浏览器兼容性最友好的,尤其是第1、3种,其它的或多或少会有些浏览器兼容性问题
做为一名前端程序员,有一个学习的氛围跟一个交流圈子特别重要。这是我的一个前端学习交流群 330336289(邀请码:寂静),想学习交流前端,打算深入了解这个行业的朋友,不管你是小白还是大牛都欢迎加入,大家一起交流学习。
转载于:https://juejin.im/post/5af1a9b3518825673a20855c
前端秘籍,CSS垂直居中必学八式,一招一式尽显功力相关推荐
- web前端JavaScript程序员必学技术指南
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...
- 前端知识-CSS垂直居中详解
行内元素垂直居中对齐: 1.只能用于inline-block,inline 2.vertical-aligh:baseline|top|middle|end 3. text-align:center; ...
- web前端:技术提升必学的HTML用法
现在这个社会最害怕的是什么,无非是纸上谈兵这样的人,你对问题的见解,你对事情的看法都有很多独到的解释,但是真正地让你带一个项目,写一行代码的时候,短板就开始暴露,所以对于这样的情况一定要避免.以下内容 ...
- div css标记,前端初学者必学的div加css标签
原标题:前端初学者必学的div加css标签 今天给大家分享前端初学者必须要学习的标签,这些标签你都会了吗? DIV加css标签 页头:header 登录条:loginBar 标志:logo 侧栏:si ...
- 想转行做web前端工程师,必学这6大技能!你都知道吗?
web前端工程师是近几年才发展出来的新兴职业,也是目前火爆且高薪的职业. 大需求的市场环境下,出现了越来越多的人群转行做web前端工程师,如设计师.后台程序员.网虫.大学其他专业.策划.编辑等等. 要 ...
- 从零开始学前端:CSS复合选择器 --- 今天你学习了吗?(CSS:Day10)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录 从零开始学前端:程序猿小白也可以完全 ...
- 从零开始学前端:CSS背景颜色 --- 今天你学习了吗?(CSS:Day09)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS字体属性和文本属性 - 今天你学习了吗?(CSS:Day08) 文章目录 从零开始学前端:程序猿小白 ...
- 从零开始学前端:CSS字体属性和文本属性 --- 今天你学习了吗?(CSS:Day08)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...
- 从零开始学前端:CSS引入 --- 今天你学习了吗?(CSS:Day07)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:列表标签 - 今天你学习了吗?(CSS:Day06) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
- 前端菜鸟必学!less使用基础讲解
前端菜鸟必学!less使用基础讲解 概述 使用方法 语法简介 嵌套规则 实例 概述 less是动态的样式表语言,通过简单,明了的语法定义,使编写css 的工作变得非常简单,在实际项目开发中,大大提高了 ...
最新文章
- Pentaho部署文档校验过程中遇到的一些问题和解决对策
- [Hadoop][Zookeeper]Cluster + HA
- Struts2 配置文件手册
- OpenStack RPM Sample 解析
- 利用颜色和形态学两种方法进行车牌区域提取的OpenCV代码
- 苹果a10处理器_iPhone运行安卓系统卡成翔,苹果A系处理器彻底跌落神坛!
- 使用REVERSE INDEX改善大规模数据插入【IMPROVE INSERT STATEMENT USING REVERSE INDEX】
- 剑网三通过VR来进行游戏快乐,是不是会加倍?什么时候用得上?
- SQLPLUS 使用的一些技巧
- 关于 IE 模态对话框的两个问题
- 48V自动启停的Stateflow应用
- 当我跨过沉沦的一切,向着永恒开战的时候,你是我的军旗。——王小波
- 愿得一人心——祭奠······埋葬我218的爱情
- 区分gym中的gym.make()函数与gym.vector.make()函数
- anbox 使用情况_如何在Linux PC上启动并运行Anbox?
- 荐读:FPGA设计经验之图像处理
- PHP实现页面静态化
- 计算机毕业设计ssm农产品推广平台98966系统+程序+源码+lw+远程部署
- echarts怎么控制圆饼图的大小
- 机器学习中的数学——距离定义(十): 布雷柯蒂斯距离(Bray Curtis Distance)