<!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. leetcode:Palindrome Number （判断数字是否回文串） 【面试算法题】

    题目: Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could neg ...

  2. 飞行模式下不让打开FM

     android 判断手机当前是否是飞行模式,在AirplaneModeEnabler中 提供了isAirplaneModeOn方法来判断当前是否是Airplane mode:public stati ...

  3. html中编写js的方式

    第一种:引用外部的js文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http ...

  4. nginx 配置访问正则匹配

    server{ listen 80; server_name api.zyy.com; root /var/www/api_zyy; index index.php; location ~ /asse ...

  5. JAVA-FileInputStream之read方法

    今天一个友询问FileInputStrem方法的read()和read(byte b) 方法为什么都用-1来判断读文件结束的问题,在此和大家一起学习下. 关于FileInputStream 它用于读取 ...

  6. log4net截取配置错误信息，(验证配置信息是否配置正确)

    在</system.web>之后 <!--log4错误日志配置:开始--> <system.diagnostics> <trace autoflush=&qu ...

  7. [c#]控制台进度条的示例

    看到[vb.net]控制台进度条的示例 感觉很好玩,翻译成C#版. using System; using System.Collections.Generic; using System.Linq; ...

  8. QML学习心得

    Qt Quick之于QML,正如Qt 之于 C++,QML是Qt中开发的一个新的语言,而Qt Quick是这个语言的一个组件库,其中包含了很多用QML写的可以现成使用的组件. QML Hello Wo ...

  9. C# 汉子增加UTF-8头

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Conv ...

  10. （我国的省—市—区）三级联动数据库.sql

    # MySQL-Front 5.1  (Build 2.7) /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE */; /*!40101 SET SQL_MODE='' */ ...