DIV水平和垂直居中的实现
在div的宽度和高度固定的情况下，实现div水平和垂直居中普遍采用如下的方式：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.mydiv{
width: 400px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -200px;
background-color: black;
}
</style>
</head>
<body>
<div class="mydiv">
</div>
</body>
</html>
1.利用定位使div的起始位置处于界面的中心，即div的左上角处于界面的中心点
position: absolute;
left: 50%;
top: 50%;
2.然后利用外边距属性上移和左移div高度和宽度的一半
margin: -150px 0 0 -200px;
补充：
1.CSS让DIV水平居中
让一个DIV水平居中。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。
.mydiv{
margin:0 auto;
width:400px;
height:300px;
background: black;
}
2.负margin属性介绍
如果使用得当，负margin是非常强大的属性，以下是2种（负margin占主导位置）的场景。
一、作用于static元素上的负margin属性
Static元素是没有设定成浮动的元素，下图说明了负margin对static元素的作用
当static元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。
例如：
/* 元素向上移10px*/
#mydiv{
margin-top:-10px;
}
但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。
例如：
/*mydiv后续元素向上移10px, mydiv本身不移动*/
#mydiv {
margin-bottom:-10px;
}
如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。
二、浮动元素上的负margin
考虑下以下这种情况
HTML代码:
<div id="mydiv1">First</div> <div id="mydiv2">Second</div>
如果给一个浮动元素加上相反方向的负margin，则会使行间距为0且内容重叠。这对于创建1列是100%宽度而其他列是固定宽度（比如100px）的自适应布局来说是非常有用的方法。
/* 应用在与浮动相反方向的负margin */
#mydiv{
float:left;
margin-right:-100px;
}
若两个元素都为浮动，且#mydiv1的元素设定margin-right为20px。这样#mydiv2会认为#mydiv1的宽度比原来宽度缩短了20px（因此会导致重叠）。但有意思的是，#mydiv1的内容不受影响，保持原有的宽度。
如果负margin等于实际宽度，则元素会被完全覆盖。这是因为元素的完全宽度等于margin，padding，border，width相加而成，所以如果负margin等于余下三者的和，那元素的实际宽度也就变成了0px。
DIV水平和垂直居中的实现的更多相关文章
- 让DIV水平和垂直居中的几种方法
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
- 【转】如何让DIV水平和垂直居中
来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...
- CSS：使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
- 使当前对象相对于上层DIV 水平、垂直居中定位
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- CSS3 div水平、垂直居中，IE9以上、Firefox、Chrome均正常
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 一个div相对于外层的div水平和垂直居中
我自己感觉,第四种比较常用 <title>无标题文档</title><style> .parent { width:800px; ...
- 如何设置DIV水平、垂直居中
一.水平居中 需要设置两点: 1 设置DIV 的width属性即宽度. 2 设置div的margin-left和margin-right属性即可 代码: <div style="w ...
- hmtl div水平、垂直居中
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单.水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两种 ...
- 如何让一个div水平和垂直居中对齐
以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; he ...
随机推荐
- ubuntu 13.10 Rhythmbox不能播放mp3 和中文乱码的问题
1.ubuntu 13.10 Rhythmbox不能播放mp3的解决方法 软件中心搜索(ubuntu额外的版权受限软件)不带括号 2.中文乱码问题解决方法: 终端顺序操作 : 1. sudo ged ...
- 修改进程占用内存SetProcessWorkingSetSize函数（多篇相关文章值得学习）
物理内存和虚拟内存 物理内存,在应用中,自然是顾名思义,物理上,真实的插在板子上的内存是多大就是多大了.看机器配置的时候,看的就是这个物理内存. 如果执行的程序很大或很多,就会导致物理内存消耗殆尽.为 ...
- Qt4创建工程的几种方法：linux系统
方法一:以Qt Creator 作为IDE 1.启动Qt Creator,并创建一个空项目 2.输入路径和工程名字 3.添加cpp文件 4.添加代码,并且编译执行 5.执行结果 方法二:利用linux ...
- Oracle实用-01：绑定变量
数据库虽然在学校系统学习过,但是在工作中真正使用起来收获又是不一样的,今天起打算将项目中使用到的技术再分享出来,不以书本的顺序,只从碰到的问题为顺序. 虽然不是纯粹的数据库工程师,但是每个程序员总免不 ...
- 数据和C
整数就是没有小数部分的数,在C中小数点永远不会出现在整数中.例如2,-24,2456都是整数,整数以二进制存储,例如7的二进制表示为111,在8位的字节中存储它的前5位为0,将后3位置1. 浮点数即加 ...
- 无比奇怪的问题，Runtime报错，程序仍可运行（有可能是线程崩溃，但主程序不崩溃，线程崩溃可能是因为锁使用不当引起的）
但主界面仍可操作. 我估计是,线程运行崩溃,不影响主界面的运行(如果你不去点击那个确认错误的对话框的话). 仔细分析,我估计是使用锁不当引起的.有2种情况下必崩溃: 1. 对没有上锁的锁进行解锁 2. ...
- 让盘古分词支持最新的Lucene.Net 3.0.3
原文:让盘古分词支持最新的Lucene.Net 3.0.3 好多年没升级过的Lucene.Net最近居然升级了,到了3.0.3后接口发生了很大变化,原来好多分词库都不能用了,所以上次我把MMSeg给修 ...
- javascript中外部js文件取得自身完整路径得办法
原文:javascript中外部js文件取得自身完整路径得办法 有时候我们需要引入一个外部js文件,这个js文件又需要用到自己的路径或者是所在的目录,别问怎么又这么变态的需求,开发做久了各种奇葩需求也 ...
- mysql 查询优化案例
mysql> explain SELECT c.`sn` clientSn,asm.`clientManagerSn`,pry.`productSn`,1 TYPE,pr.`capitalBal ...
- 嵌入式linux多进程编程
嵌入式linux多进程编程 在主程序显示文本菜单.提供例如以下服务.要求每一个服务都通过生成子进程来提供. 服务包含:日历信息显示,日期信息显示,推断闰年服务,文件复制功能,数字排序功能.退出功能. ...