css

<style>

.main{

    background: #999999;

    width: 600px;

    height: 400px;

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -200px 0 0 -300px;/*此处的-200px是widthd的一半，-300px是height的一半*/

}

</style>

html

<body>

<div class="main">

</div>

</body>

效果图如下

div 水平垂直居中的更多相关文章

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

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

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

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

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

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

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

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

  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. 【html】【10】div布局[div水平垂直居中]

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

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

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

  10. 如何将一个div水平垂直居中？4种方法做推荐

    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

随机推荐

  1. WCF-方法重载

    一.服务端重载 一般写法直接重载,但是会报错,如下. [ServiceContract] public interface IService1 { [OperationContract] string ...

  2. Java的设计模式（5）-- 策略模式

    定义一系列算法,把它们一个个封装起来,并且使它们可以相互替换,本模式使得算法可以独立于使用它的客户而变化.策略模式包括以下三种角色 策略(Strategy):策略是一个接口,该接口定义若干个算法标识, ...

  3. python（自用手册）

    第二章 入门 python简介 python是一个解释型语言是一个强语言 编译型 把每一条语句都提前编译成机器语言,保存成二进制以便计算机运行可以脱离环境运行 优点 预编译使用前直接编译成计算机可以识 ...

  4. 网络地址转换（NAT）

    NAT是解决ipv4地址短缺的方案之一 NAT是将位于子网中的主机与外网连通,子网中所有的主机都可以通过路由器的网络地址转换访问外网.对于外网来说该路由器相当于一台完整的主机,子网内所有主机对外网的访 ...

  5. go开发 modules 的使用和代理

    go开发 modules 的使用和代理 初学go语言,一堆 来自谷歌的包如 import ( "code.google.com/xxx" ) 不翻墙是很难下载下来的. 另外还有麻烦 ...

  6. Sonya and Matrix Beauty CodeForces - 1080E (manacher)

    大意: 给定$nm$字符串矩阵. 若一个子矩形每一行重排后可以满足每行每列都是回文, 那么它为好矩形. 求所有好矩形个数. 一个矩形合法等价于每一行出现次数为奇数的最多只有一个字符, 并且对称的两行对 ...

  7. MySQL 5.7使用xtabackup报错解决

    报错信息: InnoDB: An optimized (without redo logging) DDLoperation has been performed. All modified page ...

  8. ZooKeeper学习笔记（四）——shell客户端命令操作

    ZooKeeper客户端命令行操作 启动服务端 [simon@hadoop102 zookeeper-3.4.10]$ bin/zkServer.sh start 查看状态信息 Using confi ...

  9. Tomcat Lifecycle

    org.apache.catalina.Lifecycle 接口统一管理生命周期,所有生命周期组件都要实现Lifecycle接口. 该接口定义了13个String类型的常量,用于LifecycleEv ...

  10. POJ1222、POJ3279、POJ1753--Flip

    POJ1222-EXTENDED LIGHTS OUT POJ3279-Fliptile POJ1753-Flip Game 为什么将着三个题放一起讲呢?因为只要搞明白了其中一点,就可以一次3ac了- ...