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. Git master合并分支时提示“Already up-to-date”

    Git master合并分支时提示"Already up-to-date" ​ 在使用Git把当前分支合并到master提示"Already up-to-date&quo ...

  2. shell从简单到脱坑

    1.计算1-100的和(seq 1 100 使用反引号括起来的比较坑) #!/bin/bash ` do sum=$[$i+$sum] done echo $sum 2.编写shell脚本,要求输入一 ...

  3. Python后台执行不启用缓存

    1.运行时加-u参数,如 # python3 -u test.py >> test.log & 用man查看python的-u参数,说明如下: Force stdin, stdou ...

  4. svn钩子(hooks)

    目录 钩子脚本的具体写法就是操作系统中shell脚本程序的写法,请根据自己SVN所在的操作系统和shell程序进行相应的写作 所谓钩子就是与一些版本库事件触发的程序,例如新修订版本的创建,或是未版本化 ...

  5. linux安装png2icon方法

    此工具用于将png图片转换为ico格式的文件,一个小工具,但很实用 官网:http://www.winterdrache.de/freeware/png2ico/ 下载: wget http://ww ...

  6. .net core的startup中配置读取

    public class Startup { public Startup(IHostingEnvironment env) { Configuration = new ConfigurationBu ...

  7. iOS CGContextRef/UIBezierPath（绘图）

    绘图的底层实现方法 注意:在drawRect方法中系统会默认创建一个上下文(C语言类型)在其他方法中不会有这样一个上下文(可以自己测试) @implementation DrawView //注意,在 ...

  8. iOS10推送必看UNNotificationAttachment以及UNTimeIntervalNotificationTrigger

    虽然这篇文章比较长,也不好理解,但是还是建议大家收藏,以后用到的时候,可以看看,有耐心的还是读一读. 这篇文章开始,我会跟大家好好讲讲,苹果新发布的iOS10的所有通知类. 一.创建本地通知事例详解: ...

  9. sql server统计总成绩和排名

    这里的图片可以拖拽到一个新页面查看原图!!!! 这里有两个表,需要查询总成绩和排名 Sql语句: select ST.name,SE.Chinese,SE.Math,SE.English, ( SE. ...

  10. TLS握手秘钥套件分析

    1.为了弄清楚TLS1.3的内部结构,觉得有必要将TLS的整个结构从新整理一遍,方便后续在做握手协议的形式化分析的时候能够不遗漏每个加密和认证的的环节. TLS1.3不论文在协议内容上还是性能上都较之 ...