总结了几种解决方法 但也不是说除了我说的就没有其他方法了

第一个、利用flex布局

代码:

效果:

第二个、利用transform 的 translate属性

代码:

效果:

第三个、使用伪类::after

代码:

补充第四个 直接利用margin:auto; 鉴定完毕很好用

效果:同上

如果各位大神还有其他的方法

热烈欢迎 下面留言 先替广大莘莘学子谢谢你~

如需转载请注明出处 谢谢~!

纯CSS垂直居中的四种解决方案的更多相关文章

  1. CSS垂直居中的四种方法

    写在前面的话 最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家. 垂直居中的四种方法 ①基础的方法 设置父元素的line-height等于height,这种方 ...

  2. Mybatis多参传递的四种解决方案

    Mybatis多参传递的四种解决方案 代码异常:org.apache.ibatis.binding.BindingException: Parameter 'param' not found. 长时间 ...

  3. HTML5样式和列表、CSS链接的四种状态

    一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...

  4. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  5. CSS简单的四种引入方式

    CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...

  6. iOS多线程全套:线程生命周期,多线程的四种解决方案,线程安全问题,GCD的使用,NSOperation的使用

    目的 本文主要是分享iOS多线程的相关内容,为了更系统的讲解,将分为以下7个方面来展开描述. 多线程的基本概念 线程的状态与生命周期 多线程的四种解决方案:pthread,NSThread,GCD,N ...

  7. 直接将字典转为DataFrame格式时,会出现:ValueError: If using all scalar values, you must pass an index(四种解决方案)

    问题:想要将字典直接转为DataFrame格式时,除了字典外没有传入其他参数时,会报错 ValueError: If using all scalar values, you must pass an ...

  8. CSS垂直居中的8种方法

    CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...

  9. HTML与CSS结合的四种方式

    HTML与CSS结合的四种方式: 方式一:每个标签加一个属性: 例如:<div style="background-color:red; color: green"> ...

随机推荐

  1. MySQL配置文件

    [mysqld]datadir=/usr/local//mysql/data    #数据存放位置socket=/var/lib/mysql/mysql.sockuser=mysqllower_cas ...

  2. jquery中的ajax方法参数

    引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...

  3. iOS 神秘而又强大的传感器系统 (附demo)

    iOS中的各种传感器: 随着科技的发展,机器感知人的行为!Goole的无人驾驶汽车到李彦宏的无人驾汽车,都带入了各种计算及传感. 为了研究自然现象和制造劳动工具,人类必须了解外界的各类信息.了解外界信 ...

  4. 原生js获取left值和top值

    在用js做动态效果时,通常需要获取元素绝对定位中的left和top属性值.比如做一个碰撞广告,就要不停的获取元素的top和left属性值. 需要注意的事:取值的元素必须要设置position:abso ...

  5. 关于Eclipse无法识别手机或者模拟器的解决方案

    Android开发的时候经常会出现eclipse devices中不显示手机或模拟器的情况 网上有很多方法,但是都不实用.这里我提供一种方法: 如果手机连接上了不显示的话首先我们要确定我们手机的驱动是 ...

  6. js 数组 remove

    在写js代码时候,有时需要移除数组的元素,在js数组中没有remove 方法, 不过有splice 方法同样可以用于移除数组元素:(http://www.w3school.com.cn/jsref/j ...

  7. shell脚本中的整数测试

    shell脚本中的整数测试 author:headsen chen      2017-10-17   13:58:12 个人原创,转载请注明作者,出处,否则依法追究法律责任 1,test用法:tes ...

  8. JDK配置及tomcat部署

    JDK配置及tomcat部署 2017-09-30-17:54:03 个人原创博客,转载请注明出处,作者,否则依法追究责任,文中引用了一些百度经验的图片,特此注明. 一,配置JDK:1.8.0_66版 ...

  9. 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. ...

  10. trigger回调方法的实现

    用传参实现trigger的回调: 点击btn1触发btn2的click事件并执行trigger中传入的回调方法 <body> <input type="button&quo ...