在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水平和垂直居中的实现的更多相关文章

  1. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

  2. 【转】如何让DIV水平和垂直居中

    来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...

  3. CSS：使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

  4. 使当前对象相对于上层DIV 水平、垂直居中定位

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  5. CSS3 div水平、垂直居中，IE9以上、Firefox、Chrome均正常

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 一个div相对于外层的div水平和垂直居中

    我自己感觉,第四种比较常用 <title>无标题文档</title><style>        .parent {           width:800px; ...

  7. 如何设置DIV水平、垂直居中

    一.水平居中 需要设置两点: 1  设置DIV 的width属性即宽度. 2  设置div的margin-left和margin-right属性即可 代码: <div style="w ...

  8. hmtl div水平、垂直居中

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单.水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两种 ...

  9. 如何让一个div水平和垂直居中对齐

    以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; he ...

随机推荐

  1. 基于unity3d和leap motion的拼图游戏

    近期用unity3d引擎做了一个拼图游戏,会分几次写完,以此作为总结. 本文基本查找了网上能查到的全部资料作为參考.也算是大家节省了时间. 眼下仅仅完毕了拼图部分,leap motion手势控制部分会 ...

  2. JS、JQury - 文本框内容改变事件

    例子: 效果: 前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...

  3. 正确理解Python文件读写模式字w+、a+和r+

    w+ 和 r+的差别不难理解.还有a+ +同一时候读写,就可以读又可写,边写边读.边读边写,不用flush,用seek 和 tell可測得. fp = open("a.txt", ...

  4. 华为OJ培训主题 比赛统计

    题目例如以下: 比赛情况统计 有一个游戏平台,各个參赛队伍(以唯一的TeamID来标识)之间进行单循环的对抗赛,两个队伍之间仅仅举行一场比赛,比赛以得分的多少定胜负.须要完毕一个统计赛况的程序,可以随 ...

  5. 控制台程序的参数解析类库 CommandLine

    C#控制台程序的参数解析类库 CommandLine简单使用说明 前言 C#开发的控制台程序,默认接收string[] args参数.如果有多个参数需要输入时,可以按照顺序依次输入:但如果有些参数不是 ...

  6. Processing.js

    Processing.js Processing.js 1.4.1 released!

  7. 浅析innodb_support_xa与innodb_flush_log_at_trx_commit

    很久以前对innodb_support_xa存在一点误解,当初一直认为innodb_support_xa只控制外部xa事务,内部的xa事务是mysql内部进行控制,无法人为干预(这里说的内部xa事务主 ...

  8. Html 内嵌 选择器属性 Dom操作 JavaScript 事件

    HTML标签: 一.通用标签(一般标签) 1.格式控制标签 <font color="#6699aa" face="楷体" size="24&q ...

  9. DataSnap起源于MIDAS（十几篇博客）

    作为MIDAS起始于Delphi3,Delphi4是MIDAS II,Delphi5中是MIDASIII,而后基于COM远程数据模块方式使用TCP/IP,HTTP,(D)COM构建出强大的通讯能力.从 ...

  10. casio 手表北京维修网络

    http://www.casio.com.cn/support/service/wat/28.html 手表北京维修网络 号新东安广场2座11层1103室电话:010-65157818/8391585 ...