position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);

css上下居中的更多相关文章

  1. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  2. 使用Flexbox实现CSS竖向居中

    竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...

  3. CSS标签居中

    CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...

  4. css常用居中

    对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...

  5. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  6. css图片居中(水平居中和垂直居中)

    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...

  7. CSS中居中的完全指南（中英对照翻译）

    翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...

  8. css左右居中的几种常见方法

    本人是前端的新人,这是第一次写技术博客,各位大大,本文有错误请指正,手中的板砖尽量轻拍,我怕疼~~ 对于水平居中和垂直居中我也用过很多方法,但是有的时候管用有的时候又嗝屁不好使了.涉及到的情况很多,所 ...

  9. 用CSS实现居中的方式

    直接放链接吧,最近大量时间放在看书上了,不想玩游戏,不想看电影,只想看书,早日做出自己的网站卖广告. CSS居中

  10. CSS布局——居中

    参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235 1.行内元素水平居中text-align:center对图片,按钮,文字等行内元素 ...

随机推荐

  1. ts配置项

    { "compilerOptions": { /* 基本选项 */ "target": "es5", // 指定 ECMAScript 目标 ...

  2. [BUUCTF]REVERSE——[FlareOn6]Overlong

    [FlareOn6]Overlong 附件 步骤: 例行检查,32位程序,不懂是个啥 32位ida载入,main函数很简单 处理函数 sub_401000 程序只对unk_402008的28位进行了处 ...

  3. 筛选（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 [视图]选项卡下有个[筛选器],筛选功能就在里面实现. 比如按[里程碑]筛选. 按[日期范围],再指定个起始日期和结束日期 ...

  4. AtCoder Beginner Contest 148 题解

    目录 AtCoder Beginner Contest 148 题解 前言 A - Round One 题意 做法 程序 B - Strings with the Same Length 题意 做法 ...

  5. CF1080A Petya and Origami 题解

    Content 小 P 想给 \(n\) 位朋友各发一张邀请函,每张邀请函需要耗费 \(2\) 张红色纸,\(5\) 张绿色纸和 \(8\) 张蓝色纸.商店里面的纸是一堆一堆卖的,每堆里面有 \(k\ ...

  6. python3 迭代器&生成器

    前戏:列表生成式 等于 用列表生成式生成列表.需要将所有数据生成到内存中,占用空间,如果数据太多.生成数据就会耗时较久. 例如需要运行卡顿一下..... 定义一个生成器:定义时不生成任何数据,只有通过 ...

  7. 金山云主机centos7.4根目录挂载文件书写错误无法进入系统解决办法

    由于/etc/fstab写错,根目录无法挂载,开机提示如下 处理办法: 根据提示输入root密码: 执行mount -o remount,rw /重新挂载根目录. vim 修改挂载文件 reboot重 ...

  8. C/C++ 基本类型 占字节

    下面给出不同位数编译器下的基本数据类型所占的字节数: 16位编译器 char :1个字节char*: 2个字节(即指针变量)short: 2个字节int:  2个字节unsigned int : 2个 ...

  9. jetson nano开发使用的基础详细分享

    前言: 最近拿到一块jetson nano 2GB版本的板子,折腾了一下,从烧录镜像.修改配件等,准备一篇开箱基础文章给大家介绍一下这块AI开发板. 作者:良知犹存 转载授权以及围观:欢迎关注微信公众 ...

  10. 【LeetCode】 258. Add Digits 解题报告（Java & Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 方法一:递归 方法二:减1模9 方法三:直接模9 日 ...