<!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. RIP协议两个版本号对不连续子网的支持情况实验

    (增加时注明"会员咨询")

  2. KVM硬件辅助虚拟化之 EPT(Extended Page Table)

    传统OS环境中,CPU对内存的訪问都必须通过MMU将虚拟地址VA转换为物理地址PA从而得到真正的Physical Memory Access,即:VA->MMU->PA,见下图. 虚拟执行 ...

  3. AVC1与H264的差别

    今天上网时偶尔发现这个在我脑海里疑惑的问题的答案. H.264 Video Types The following media subtypes are defined for H.264 video ...

  4. js中setTimeout/setInterval定时器用法示例

    js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...

  5. mybatis的详解

    最新不知道脑子怎么想的,突然对mybatis特别感兴趣,之前在学校的时候学过两天,有了一个简单的认识,工作以后,项目中也有用到,趁着兴趣还在,抓紧整理一个文档,方便学习mybatis,同时,自己也在巩 ...

  6. plsql编程中游标的使用

    游标(Cursor):用来查询数据库,获取记录集合(结果集)的指针,可以让开发者一次访问一行结果集,在每条结果集上作操作. oracle中显示使用游标一般要包含以下5个步骤: 声明一些变量以便存储从游 ...

  7. IIS上部署网站404错误

    新装的系统上部署.net网站遇到403.404错误,可能原因记录: 1.应用程序池选择错误,一般选择4.0的 2.ASP.NET4.0应用程序池未安装(一般先安装了framework4.0,后安装ii ...

  8. EasyUi DataGrid中数据编辑方式及编辑后数据获取，校验处理

    EasyUi中的DataGrid提供前台编辑的相关函数. 实现客户选中DataGrid中一列后,对选中列中的一个字段进行编辑,并对数据进行实时校验后,传递至后台保存的需求, 主要涉及到DataGrid ...

  9. （原）anaconda 的安装与在pycharm中的版本切换

    参考网页: http://continuum.io/blog/anaconda-python-3 http://conda.pydata.org/docs/intro.html#creating-py ...

  10. python学习第十天 -- 函数

    稍微学过其他编程语言的人都应该了解函数的概念.在这里就不做过多的介绍. Python内置了很多有用的函数,我们可以也直接调用. 可以直接从Python的官方网站查看文档: http://docs.py ...