//居中方法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. JMeter-正则表达式(Json中取value的部分值)

    2019-04-26问题:返回的json中提取短信验证码614930 { : "total":2, : "totalPage":1, : "rows& ...

  2. git加速和只下载部分目录

    浅复制 工作要用到的.git有1.8G太大了.下载过程要好几个小时,太慢了.可以这样操作 git clone 默认会下载项目的完整历史版本,如果你只关心最新版的代码,而不关心之前的历史信息,可以使用 ...

  3. Cocos Creator JS web平台复制粘贴代码(亲测可用)

    Cocos Creator JS web平台复制粘贴代码(亲测可用) 1 webCopyString: function(str){ var input = str; const el = docum ...

  4. Lintcode: Knight Shortest Path

    Given a knight in a chessboard (a binary matrix with 0 as empty and 1 as barrier) with a source posi ...

  5. Qt如何在QTabWidget上绘图

    Qt绘图事件必须在paintEvent事件下绘图,这样导致我们在向Qt设计师界面上拖拽的控件绘图时,造成了很大的麻烦. 我们不能在拖拽的控件上写paintEvent函数,但是可以自定义一个类,继承某一 ...

  6. C#调用Microsoft.DirectX.DirectSound问题记录及解决

    问题1:初始化结构体WaveFormat或其他变量时卡死 修改App.config,修改方法如下: 原App.config <?xml version="1.0" encod ...

  7. CentOS 7 扩大/root分区

    Linux 根目录爆满解决 亲测有效!转载自https://blog.csdn.net/e_wsq/article/details/79531493 CentOS 7 调整 home分区扩大 root ...

  8. linux下tomcat的https访问

    1.安装JDK(省略…) 2.安装tomcat(省略…) 3.配置SSL 进入JDK的安装目录 # cd /usr/java/jdk1..0_03/bin # ./keytool -genkey -a ...

  9. Qt3D 5.9 and future

    2017-05 http://blog.qt.io/blog/2017/05/24/qt3d/ Qt3D future 5.9 Use Qt Quick or QPainter to render i ...

  10. SQL Server 复制表结构以及数据,去除表中重复字段

    --复制另一个数据库中的某张表的结构及数据--select * from Test.dbo.TestTable(查询表中所有数据) --into [表名] 插入当前数据库新表,如果没有该表就创建 se ...