<!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. Qt QString to char*

    QString转换成char * 的时候,一定要定义一个QBateArray的变量.不能连写 How can I convert a QString to char* and vice versa ? ...

  2. Java基础知识强化65：基本类型包装类之Integer的构造方法

    1. Integer类概述 (1)Integer类在对象中包装了一个基本类型 int 的值,Integer类型的对象包含一个int类型的字段. (2)该类提供了多个方法,能在int类型和String类 ...

  3. 解决蛋疼的阿里云单CPU使用率的问题。

    工作中涉及到阿里云的应用.在性能测试阶段,压测过程中只要一个CPU未使用满,第二个CPU以至于第三个和第四个CPU完全用不到. 后来和阿里云的同事沟通他们现在用的是单队列的网卡,只能靠RPS/RFS这 ...

  4. verilog流水线加法器

    四位加法器 两级加法实现 verilog code module pipeliningadder( output reg [3:0] s, output reg co, input [3:0] a, ...

  5. Android -------- RelativeLayout 和 LinearLayout 的性能分析

    布局的绘制角度 RelativeLayout不如LinearLayout快的根本原因是: RelativeLayout需要对其子View进行两次measure过程, 而LinearLayout则只需一 ...

  6. [c#]asp.net开发微信公众平台(3)微信消息封装及反射赋值

    上一篇已经搭建好整体框架,实现了入口的验证,   验证通过后就交给LookMsgType方法处理,LookMsgType方法主要是对微信发来的不同的消息进行分解,不同的类型交给业务逻辑层不同的方法处理 ...

  7. Swift中子类必须包含的构造器和析构器

    import Foundation /* Swift中子类必须包含的构造器 1.Swift允许在父类构造器前添加required关键字, 用于声明所有子类必须包含该required构造器 (如果没有声 ...

  8. 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

    上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...

  9. apt-get install jdk

    怕忘记,记录下: sudo apt-get install python-software-properties sudo add-apt-repository ppa:webupd8team/jav ...

  10. uva 1595 - Symmetry

    思路:首先,如果这些点对称,那么它们的对称轴是x = m(m是所有点横坐标的平均值):   把这些点放到一个集合里,然后扫描每个点,计算出它关于x = m的对称点,看这个点是否在集合里面.   如果有 ...