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. oracle安装内核参数设置

    安装oracle内核参数说明及设置 kernel.shmmax 说明: Linux进程可以分配的单独共享内存段的最大值(byte) 64位的linux操作系统,设置应该大于SGA_MAX_TARGET ...

  2. Python for循环生成列表

    一般Python for语句前不加语句,但我在机器学习实战中看到了这两条语句: featList = [example[i] for example in dataSet] classList = [ ...

  3. redis数据库——python使用和django中使用

    为什么要学redis 1.redis是内存 no-sql 数据库,相比mysql等硬盘数据库效率高 2.在内存值配置数据库使用,而不直接使用内存,redis存储的数据是可以管理的 3.memcache ...

  4. PAT(B) 1043 输出PATest（Java）统计

    题目链接:1043 输出PATest (20 point(s)) 题目描述 给定一个长度不超过 10​4​​ 的.仅由英文字母构成的字符串.请将字符重新调整顺序,按 PATestPATest- 这样的 ...

  5. Vue、SPA实现登陆

    axios/qs/vue-axios安装及使用步骤 首先我们要下载三个依赖包,方便后面的开发使用需要: npm install axios -S   axios是vue2提倡使用的轻量版的ajax.它 ...

  6. java.lang.RuntimeException: Unable to instantiate activity ComponentInfo异常解决

    不能实例化activity有如下三种情况: 1.没有在Manifest.xml 清单中注册该activity,或者在创建完activity后,修改了包名或者activity的类名,而配置清单中没有修改 ...

  7. Visual Studio中找不到.Net Core SDK

    在win 7 64位上安装了.Net Core 2.1 x86 SDK后,又卸载重新安装了.Net Core 3/2 x64 SDK.结果在VS中新建项目时没有.Net Core 3.1 SDK. 在 ...

  8. Apollo 与 .net core

    appsettings配置内容 { "Apollo": { "AppId": "netcore", "Env": &qu ...

  9. 节日营销！这样搞-App运营日常

    节日送礼需求日益增长,当儿女们有了购买需求的时候,商家如何突出重围,成为孝子们的首选?如何做好节日营销?几个经验分享一下: 1.抓住节日特色 结合节日风格特色,营造节日气氛,如母亲节这种节日,主要体现 ...

  10. python+django早教课程

    虚拟环境安装项目中需要安装许多插件,为不影响系统的环境,可以为项目新建一个虚拟环境,所有的早教课程安装包在该虚拟环境中独有,以防影响其他项目.1. 安装虚拟环境:pip install virtual ...