//居中方法1

   position: absolute;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   margin: auto;

   width: 346px;

   height: 56px;

//居中方法2

   position: absolute;

   top: 50%;

   left: 50%;

   transform: translate(-50%, -50%);

CSS之垂直水平居中方法的更多相关文章

  1. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  2. css实现垂直水平居中的方法（个数不限）？

    方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...

  3. CSS垂直水平居中方法总结

    在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...

  4. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法？）

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

  5. CSS之垂直水平居中的背后

    最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...

  6. css文本垂直水平居中

    一.单行文本居中 .content{ height:100px; line-height:100px; text-align:center; border:1px solid red; } 效果图 二 ...

  7. CSS垂直水平居中方法整理

    CSS定位中常常用到垂直居中,比如覆盖层上的弹框. 兼容性比较好的方法: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transition ...

  8. Css实现垂直水平居中的六种方法

    经常在项目中用到,今天总结了一下: 演示地址:http://codepen.io/anon/pen/xGdpOa 以下两个类为公共类,便于更好的显示效果,非核心代码 .common{ width: 6 ...

  9. css实现垂直水平居中的方法

    html结构: <div class="box"> <div>垂直居中</div> </div> 方法1:display:flex ...

随机推荐

  1. 10个用于处理日期和时间的 Python 库

    Python本身提供了处理时间日期的功能,也就是datetime标准库.除此之外,还有很多优秀的第三方库可以用来转换日期格式,格式化,时区转化等等.今天就给大家分享10个这样的Python库. 上期入 ...

  2. python发送邮件心得体会

    利用本地smtp server发送 windows下尝试装了两个smtp server大概配置了下,发现没法生效,也没时间仔细研究了.装上foxmail发现以前可以本地发送的选项已经无法找到. 不带附 ...

  3. 多个if、elif和else的搭配使用

    if-if-if-搭配成的语句块,会一个个去匹配是否满足if里面的语句; if与elif的搭配成的语句块,当匹配到if或者elif语句判断为True的时候,那么不会执行下面elif以及else里面的语 ...

  4. 使用dbms_profiler收集存储过程每步执行时间

    最近和优化团队的专家学到一个很有意义的内置包:dbms_profiler,专门用于分析Oracle存储过程中的各段代码的时间开销情况,从而快速找到性能瓶颈的步骤. 1.sys创建dbms_profil ...

  5. matlab——之class类（详细总结）

    https://blog.csdn.net/qinze5857/article/details/80545885 开篇:搜了一下网上介绍matlab的class类,信息不全,且总结不全面,于是单独he ...

  6. python 练习1（流控制）

    #!/usr/bin/python #_*_ coding:utf-8 _*_ #练习题 #1.使用while循环输入 1 2 3 4 5 6 8 9 10 #a.定义一个变量存放数字 #b.用whi ...

  7. BELLMEN-FORD普通

    #include <iostream> using namespace std; int m, n, u[100010], v[100010], w[100010];int check;i ...

  8. tomcat部署项目

    提示:指定jdk版本  在bin路径下的setclasspath.bat文件添加 set JAVA_HOME=C:\Program Files\Java\jdk1.8.0_201 set JRE_HO ...

  9. Genymotion-Android模拟器提示"Unable to connect to the Genymotion server. Please check your Internet connection."解决方法

    昨天刚装的Genymotion,昨晚还用得好好的. 今晚开机,重新打开Genymotion,却提示:"Unable to connect to the Genymotion server. ...

  10. Rsync使用方法

    Rsync是一款开源.快速.多功能.可实现全量及增量的本地或者远程数据同步的优秀工具.并且支持多系统平台运行.Rsync具有本地与远程两台主机之间的数据快速复制同步镜像.远程备份等功能,该功能类似sc ...