<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>demo</title>

    </head>

    <body>

        <style type="text/css">

            .div1{  width: 100px; height: 100px; border: 1px solid #000000;}

            .div2{ width:40px ; height: 40px; background-color: green;}

        </style>

        <div class="div1">

            <div class="div2">

            </div>

        </div>

    </body>

</html>

如上的两个div，实现div2在div1里面是居中显示

一、方法一

　　利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30

　　div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>demo</title>

    </head>

    <body>

        <style type="text/css">

            .div1{  width: 100px; height: 100px; border: 1px solid #000000;}

            .div2{ width:40px ; height: 40px; background-color: green;}

            .div22{

                margin-left: 30px;margin-top: 30px;

            }

        </style>

        <div class="div1">

            <div class="div2 div22">

            </div>

        </div>

    </body>

</html>

二、方法二

　　利用css的 position属性，把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，css如下设置

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>demo</title>

    </head>

    <body>

        <style type="text/css">

            .div1{  width: 100px; height: 100px; border: 1px solid #000000;}

            .div2{ width:40px ; height: 40px; background-color: green;}

            .div11{

                position: relative;

            }

            .div22{

                position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;

            }

        </style>

        <div class="div1 div11">

            <div class="div2 div22">

            </div>

        </div>

    </body>

</html>

三、方法三

　　还是用css的position属性，如下的html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>demo</title>

    </head>

    <body>

        <style type="text/css">

            .div1{  width: 100px; height: 100px; border: 1px solid #000000;}

            .div2{ width:40px ; height: 40px; background-color: green;}

            .div11{

                position: relative;

            }

            .div22{

                position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;

            }

        </style>

        <div class="div1 div11">

            <div class="div2 div22">

            </div>

        </div>

    </body>

</html>

四、方法四

　　利用css3的新增属性table-cell

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>demo</title>

    </head>

    <body>

        <style type="text/css">

            .div1{  width: 100px; height: 100px; border: 1px solid #000000;}

            .div2{ width:40px ; height: 40px; background-color: green;}

            .div11{

                display: table-cell;vertical-align: middle;

            }

            .div22{

                margin: auto;

            }

        </style>

        <div class="div1 div11">

            <div class="div2 div22">

            </div>

        </div>

    </body>

</html>

这个方法还有一个好处就是，div2的高度可以不固定，如下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>demo</title>

    </head>

    <body>

        <style type="text/css">

            .div1{  width: 100px; height: 100px; border: 1px solid #000000;}

            .div2{ width:40px ; background-color: green;}

            .div11{

                display: table-cell;vertical-align: middle;

            }

            .div22{

                margin: auto;

            }

        </style>

        <div class="div1 div11">

            <div class="div2 div22">

               div居中方法

            </div>

        </div>

    </body>

</html>

实现DIV居中的几种方法的更多相关文章

  1. div居中的三种方法

    方法1: #div1{ width:200px; height:200px; background:green; position:absolute; left:0; top:0; right:0; ...

  2. DIV居中的几种方法

    1. body{ text-align:center; } 缺点:body内所有内容一并居中 2. .center{ position: fixed; left: 50%; } 缺点:需要设置posi ...

  3. div居中的几种方式

    摘自:https://www.cnblogs.com/ones/p/4362531.html DIV居中的几种方法   1. 1 body{ 2 text-align:center; 3 } 缺点:b ...

  4. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  5. div垂直居中的几种方法

    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...

  6. CSS教程:div垂直居中的N种方法[转]

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  7. Qt中的布局浅析与弹簧的使用，以及Qt居中的两种方法

    1. 布局 为什么要布局: 布局之后窗口的排列是有序的 布局之后窗口的大小发生变化, 控件的大小也会对应变化 如果不对控件布局, 窗口显示出来之后有些控件的看不到的 布局是可以嵌套使用 常用的布局方式 ...

  8. 让一个图片在div中居中（四种方法）

    第一种方法: <div class="title"> <div class="flag"></div> <div cl ...

  9. 《Web开发中让盒子居中的几种方法》

    一.记录下几种盒子居中的方法: 1.0.margin固定宽高居中: 2.0.负margin居中: 3.0.绝对定位居中: 4.0.table-cell居中: 5.0.flex居中: 6.0.trans ...

随机推荐

  1. Dx12 occlusion query

    https://github.com/Microsoft/DirectX-Graphics-Samples/blob/master/Samples/Desktop/D3D12PredicationQu ...

  2. bash: hadoop:command not found

    这种情况应该是hadoop的bin环境变量没有配置好 打开 gedit ~/.bashrc 修改 export HADOOP_HOME=/home/hadoop1/softwares/hadoop- ...

  3. JVM类加载机制详解（一）JVM类加载过程

    http://blog.csdn.net/zhangliangzi/article/details/51319033 http://chenzhou123520.iteye.com/blog/1597 ...

  4. HDU2189 悼念512汶川大地震遇难同胞——来生一起走 【母函数】

    悼念512汶川大地震遇难同胞--来生一起走 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  5. JBoss 系列十八：使用JGroups构建块RpcDispatcher构建群组通信应用

    内容概要 本部分说明JGroups构建块接口RpcDispatcher,具体提供一个简单示例来说明如何使用JGroups构建块RpcDispatcher构建群组通信应用. 示例描述 类似Message ...

  6. UVa145 Gondwanaland Telecom

    Time limit: 3.000 seconds 限时:3.000秒 Problem 问题 Gondwanaland Telecom makes charges for calls accordin ...

  7. Android4.4 SystemUI加入Dialog弹窗

    此弹窗为开机SystemUI的显示弹窗: 首先.在SystemUI的源代码文件夹加入源代码类文件,文件夹为frameworks/base/packages/SystemUI/src/com/andro ...

  8. Java基础——线程总结

    Java基础--线程总结 一.线程是什么? 线程:一个程序里不同的运行路径. 二.怎样创建线程? 两种方法创建线程: 第一种 (1)定义详细功能类实现Runnable接口,能够多次调用而实现数据共享 ...

  9. 操作系统CPU调度知识点

    1.进程基本概念:进程是程序的一次运行. 是系统进程资源分配和调度的基本单位. 2.进程三态:运行状态.就绪状态.堵塞状态.三态转换规则,就绪状态的进程因为调度进程运行状态,运行状态因为时间片用完而进 ...

  10. python --存储对象

    转自:http://www.cnblogs.com/vamei/archive/2012/09/15/2684781.html 在之前对Python对象的介绍中 (面向对象的基本概念,面向对象的进一步 ...