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

第一个、利用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. [UOJ207]共价大爷游长沙

    UOJ sol 这题真是太神啦! 对于S集合中的每个点对,给他们随机附上一个相同权值. 两个点在边(x,y)的两侧当且仅当一个点在x的子树中,另一个点不在x的子树中(假设x是y的儿子) 维护一下子树点 ...

  2. Poj3321 Apple tree

    翻译: 卡卡屋前有一株苹果树,每年秋天,树上长了许多苹果.卡卡很喜欢苹果.树上有N个节点,卡卡给他们编号1到N,根的编号永远是1.每个节点上最多结一个苹果.卡卡想要了解某一个子树上一共结了多少苹果. ...

  3. Vue-自带vue-resource插件实现http请求

    安装 本地环境安装路由插件vue-resource:    cnpm install vue-resource --save-dev *没有安装淘宝镜像的可以将 cnpm 替换成 npm 想要安装的可 ...

  4. 云计算之路-阿里云上：docker swarm 集群再次出现故障

    非常非常抱歉!16:30 ~ 17:00 左右我们用于跑 ASP.NET Core 站点的 docker swarm 集群再次出现宕机,由此给您带来了很大很大的麻烦,恳请您的谅解! 受此次故障影响的站 ...

  5. 数据分析之Pandas和Numpy学习笔记(持续更新)<1>

    pandas and numpy notebook        最近工作交接,整理电脑资料时看到了之前的基于Jupyter学习数据分析相关模块学习笔记.想着拿出来分享一下,可是Jupyter导出来h ...

  6. 深入理解Java虚拟机类加载机制

    1.类加载时机 对于类加载的第一个阶段---加载,虚拟机没有强制的约束,但是对于初始化阶段,虚拟机强制规定有且只有以下的5中情况必须开始初始化,当然,加载.验证.准备阶段在初始化前就已经开始. ①使用 ...

  7. AI行业需要什么样的人才

    自AI人工智能诞生以来,它的领域逐步扩大,技术层面也越来越多样化,投身于该领域的人才也越来越多,那么AI行业到底需要什么样的人才?我们应该如何定位自己,找到适合的领域?3月8日晚,在飞马网线上直播中, ...

  8. Shiro【授权、整合Spirng、Shiro过滤器】

    前言 本文主要讲解的知识点有以下: Shiro授权的方式简单介绍 与Spring整合 初始Shiro过滤器 一.Shiro授权 上一篇我们已经讲解了Shiro的认证相关的知识了,现在我们来弄Shiro ...

  9. SpringBoot（四）SpringBoot中lombok使用

    lombok概述 lombok简介 Lombok想要解决了的是在我们实体Bean中大量的Getter/Setter方法,以及toString, hashCode等可能不会用到,但是某些时候仍然需要复写 ...

  10. java--补全诗句代码

    代码效果: 代码: import java.util.Scanner; /* 补全诗句 */ public class game1 { public static void main(String[] ...