<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>水平、垂直居中Div</title>

    <meta charset="utf-8" />

    <style>

        .CenterBox {

            position: fixed;

            top: 40%;

            left: 50%;

            background-color: #eee;

            border-radius: 15px;

            padding: 15px;

            width: 350px;

            -webkit-transform: translateX(-50%) translateY(-50%);

            -moz-transform: translateX(-50%) translateY(-50%);

            -ms-transform: translateX(-50%) translateY(-50%);

            transform: translateX(-50%) translateY(-50%);

        }

    </style>

</head>

<body>

    <div class="CenterBox">

        asd

    </div>

</body>

</html>

CSS3 div水平、垂直居中，IE9以上、Firefox、Chrome均正常的更多相关文章

  1. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  2. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  3. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  4. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  5. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  6. scss : div水平垂直居中

    scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...

  7. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  8. div水平垂直居中方法及优缺点

    代码: <div class="father"> <div class="son"> </div></div> ...

  9. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

  10. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

随机推荐

  1. hive优化要点总结

    个人认为总体两种思想: 1.让服务器尽可能的多做事情,榨干服务器资源,以最高系统吞吐量为目标 再好的硬件没有充分利用起来,都是白扯淡. 比如: (1)  启动一次job尽可能的多做事情,一个job能完 ...

  2. JavaWeb三大组件(Servlet,Filter,Listener 自己整理,初学者可以借鉴一下)

    JavaWeb三大组件(Servlet,Filter,Listener 自己整理,初学者可以借鉴一下) Reference

  3. flv网页播放器播放失败

    在IIS6.0上发布网站时,在路径正确的情况下,网页flv播放器还是无法播放flv视频的解决方法. 1.打开IIS6.0管理器,打开发布的网站,点击打开属性窗口. 2.在HTTP头选项里找到MIME类 ...

  4. eclipse频繁崩溃退出

    1.出现下面的崩溃情况,并且改变内存大小都没有用,而且总是生成下面两个错误日志文件: 解决: 在eclipse.ini文件里面添加一行 -XX:-UseLoopPredicate 2.eclipse崩 ...

  5. Catel帮助手册-Catel.Core(6):日志管理

    1,简介      从2.2版本开始,Catel使用了一个自定义的日志系统,这种方式,针对log4net的引用可以被移除,做这个修改主要是为了不强迫用户使用log4net,同时,log4net看起来很 ...

  6. Linux最小化安装后配置网络

    vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0HWADDR=00:0C:29:DD:AD:B9TYPE=EthernetUUID=d7 ...

  7. java日期操作

    //字符串转日期 public static void dt7() throws ParseException { String str_date="2015---08---08" ...

  8. ubuntu 安装RPM软件包

    red hat 系统用rpm格式的文件安装软件,ubuntu安装软件是用deb格式的文件安装 在ubuntu上安装rmp文件格式的软件包步骤: 1.安装转换软件 alien(需要联网) apt-get ...

  9. java开发软件的安装

    jdk+eclipse+svn+maven+mysql+tomcat7.0+sublime安装包和jar插件 配置管理工具-SVN http://download.csdn.net/detail/u0 ...

  10. n行m列的网格中含有的矩形数

    给你一个高为n ,宽为m列的网格,计算出这个网格中有多少个矩形 公式:[ n(n+1)*m(m+1)]/4 直接想问题比较复杂,可以先考虑矩形的长,再考虑矩形的高,由对称性可知最后的结果中m和n对称 ...