纯CSS垂直居中的四种解决方案
总结了几种解决方法 但也不是说除了我说的就没有其他方法了
第一个、利用flex布局
代码:
效果:
第二个、利用transform 的 translate属性
代码:
效果:
第三个、使用伪类::after
代码:
补充第四个 直接利用margin:auto; 鉴定完毕很好用
效果:同上
如果各位大神还有其他的方法
热烈欢迎 下面留言 先替广大莘莘学子谢谢你~
如需转载请注明出处 谢谢~!
纯CSS垂直居中的四种解决方案的更多相关文章
- CSS垂直居中的四种方法
写在前面的话 最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家. 垂直居中的四种方法 ①基础的方法 设置父元素的line-height等于height,这种方 ...
- Mybatis多参传递的四种解决方案
Mybatis多参传递的四种解决方案 代码异常:org.apache.ibatis.binding.BindingException: Parameter 'param' not found. 长时间 ...
- HTML5样式和列表、CSS链接的四种状态
一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- CSS简单的四种引入方式
CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...
- iOS多线程全套:线程生命周期,多线程的四种解决方案,线程安全问题,GCD的使用,NSOperation的使用
目的 本文主要是分享iOS多线程的相关内容,为了更系统的讲解,将分为以下7个方面来展开描述. 多线程的基本概念 线程的状态与生命周期 多线程的四种解决方案:pthread,NSThread,GCD,N ...
- 直接将字典转为DataFrame格式时,会出现:ValueError: If using all scalar values, you must pass an index(四种解决方案)
问题:想要将字典直接转为DataFrame格式时,除了字典外没有传入其他参数时,会报错 ValueError: If using all scalar values, you must pass an ...
- CSS垂直居中的8种方法
CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...
- HTML与CSS结合的四种方式
HTML与CSS结合的四种方式: 方式一:每个标签加一个属性: 例如:<div style="background-color:red; color: green"> ...
随机推荐
- MySQL配置文件
[mysqld]datadir=/usr/local//mysql/data #数据存放位置socket=/var/lib/mysql/mysql.sockuser=mysqllower_cas ...
- jquery中的ajax方法参数
引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...
- iOS 神秘而又强大的传感器系统 (附demo)
iOS中的各种传感器: 随着科技的发展,机器感知人的行为!Goole的无人驾驶汽车到李彦宏的无人驾汽车,都带入了各种计算及传感. 为了研究自然现象和制造劳动工具,人类必须了解外界的各类信息.了解外界信 ...
- 原生js获取left值和top值
在用js做动态效果时,通常需要获取元素绝对定位中的left和top属性值.比如做一个碰撞广告,就要不停的获取元素的top和left属性值. 需要注意的事:取值的元素必须要设置position:abso ...
- 关于Eclipse无法识别手机或者模拟器的解决方案
Android开发的时候经常会出现eclipse devices中不显示手机或模拟器的情况 网上有很多方法,但是都不实用.这里我提供一种方法: 如果手机连接上了不显示的话首先我们要确定我们手机的驱动是 ...
- js 数组 remove
在写js代码时候,有时需要移除数组的元素,在js数组中没有remove 方法, 不过有splice 方法同样可以用于移除数组元素:(http://www.w3school.com.cn/jsref/j ...
- shell脚本中的整数测试
shell脚本中的整数测试 author:headsen chen 2017-10-17 13:58:12 个人原创,转载请注明作者,出处,否则依法追究法律责任 1,test用法:tes ...
- JDK配置及tomcat部署
JDK配置及tomcat部署 2017-09-30-17:54:03 个人原创博客,转载请注明出处,作者,否则依法追究责任,文中引用了一些百度经验的图片,特此注明. 一,配置JDK:1.8.0_66版 ...
- business expressions(一)
一. 1.24/7 24/7 :twenty four hours a day, seven days a week I work 24/7.——meaing i work all the time. ...
- trigger回调方法的实现
用传参实现trigger的回调: 点击btn1触发btn2的click事件并执行trigger中传入的回调方法 <body> <input type="button&quo ...