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

第一个、利用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. THUWC2018咸鱼记

    Day -inf 好不容易联赛水进来了 好虚啊...(萌新)什么都不会...只会大水题 估计要\(GG\)了,瑟瑟发抖 准备辣.. 自我介绍根本没面试,就没脸贴了 周围的大佬们(尤其\(Zsy\))还 ...

  2. [SCOI2016]美味

    按位从高往低贪心,枚举到第i位,只需要判断这2^i长度的区间是否有菜,用主席树就可以了 # include <bits/stdc++.h> # define RG register # d ...

  3. DOM节点类型

    DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现.这个Node接口在JavaScript中是作为Node类型实现的:除了IE外,在其他所有浏览器中都可以访问到这个类型.JavaS ...

  4. NancyFX 第三章 Web框架

    如果使用Nancy作为一个WEB框架而言,会有什么不同?实际上很多. 在使用Nancy框架为网页添加Rest节点和路由和之前的Rest框架中是相同的,这方面没有什么需要学习的了.Nancy采用一贯的处 ...

  5. Angular：Reactive Form的使用方法和自定义验证器

    本文将介绍Angular(Angular2+)中Reactive Form的有关内容,包括: Reactive Form创建方法 如何使用验证 自定义验证器 下面开始进入正文! Reactive Fo ...

  6. python格式化输出基础知识（2）

    ---恢复内容开始--- 一:请输入名片  (姓名,年龄,职业,爱好)设计名片 name=input('你的名字')age=input('你的年龄')job=input('你的工作')hobbie=i ...

  7. java正则匹配并提取字串

    Pattern p = Pattern.compile("\\(.*\\)"); Matcher m = p.matcher("1.2.0(23)"); if( ...

  8. webuploader 上传文件 生成链接下载文件

    最近 在asp.net MVC 项目 需要实现一个Excel和 图片上传功能.之前有使用过SWFUpload 做过上传图片功能,在本次实现过程中,有人推荐WebUploader 上传组件,因此采用we ...

  9. SpringtMVC运行流程：@RequestMapping 方法中的 Map、HttpServletRequest等参数信息是如何封装和传递的（源码理解）

    在平时开发SpringtMVC程序时,在Controller的方法上,通常会传入如Map.HttpServletRequest类型的参数,并且可以方便地向里面添加数据.同时,在Jsp中还可以直接使用r ...

  10. Android工程化开发这门学科的看法

    http://www.cnblogs.com/unruledboy/p/DevCareer.html http://coolshell.cn/articles/4561.html http://blo ...