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

第一个、利用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. [SCOI2010]股票交易

    题目大意: 网址:https://www.luogu.org/problemnew/show/P2569 大意:在接下来的T天中,每天股票有一个买入价格Api与卖出价格Bpi. 同时,每天买入股票数与 ...

  2. [BZOJ2752][HAOI2012]高速公路

    BZOJ Luogu sol 看上去是道数学期望题但实际上是个傻逼数据结构 首先答案的形式应该就是 \[\frac{\mbox{[l,r]区间内的子区间权值之和}}{\mbox{[l,r]区间内的子区 ...

  3. [AH/HNOI2017]礼物

    \[推推公式,即求\Sigma^{n}_{i=1} (x_{i+k}-y_i+c)^2最小,c范围为[-m, m]\] \[拆开,就是\Sigma x_i^2 + \Sigma y_i^2 + n * ...

  4. Vue-自定义事件之—— 子组件修改父组件的值

    如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你 ...

  5. css导航条等元素位置不变

    在容器元素中插入 position: fixed; 如果是在微信小程序中,直接用bottom或者top等就可以简单的设置导航条了.

  6. 关于在Django中Json无法序列化datetime的解决办法

    我们在网页设计时经常会在前端和后台进行交互,前端回传的方法可以时redirect一个地址加上显式的参数,第二个办法就是使用Ajax结构.那么在传到view函数中进行处理后是需要通过Json格式进行返回 ...

  7. js文本框字符数输入限制

    我们常常在前台页面做一些文本输入长度的验证,为什么呢?因为数据库字段设置了大小,如果不限制输入长度,那么写入库时就会引发字符串截断异常.今天就给大家分享一个jquery插件来解决这一问题. (func ...

  8. python xlsxwriter库生成图表的应用

    xlsxwriter可能用过的人并不是很多,不过使用后就会感觉,他的功能让你叹服,除了可以按要求生成你所需要的excel外 还可以加上很形象的各种图,比如柱状图.饼图.折线图等. 请看本人生成的: 这 ...

  9. IDEA2017版本打可运行jar包并运行

    一.打JAR包 JAR:From modules with dependencies  将依赖一起打包 一般依赖放在与xx.jar同级的libs文件夹中 敲黑板,下图第一个框是输出jar包的位置,第二 ...

  10. JS离开页面 弹窗

    function bindDOMEvents() { $(document).keydown(function (e) { var key = e.which || e.keyCode; if (ke ...