<!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. 图灵机器人聊天api

    图灵机器人,功能非常强大,可用于聊天.查询等多个领域 图灵机器人官网:http://www.tuling123.com api地址:http://www.tuling123.com/openapi/a ...

  2. Linux自定义应用程序及其菜单图标

    在Linux桌面系统中,如果需要自己添加一个应用程序,如果是标准的bin, lib, share结构,我通常将其放在/usr/local/bin中.如果非这样,或者程序文件很多,易造成Linux系统目 ...

  3. Django开发流程及实例

    创建虚拟环境 创建:mkvirtualenv [虚拟环境名称] 删除:rmvirtualenv [虚拟环境名称] 进入:workon [虚拟环境名称] 退出:deactivate 所有的虚拟环境,都位 ...

  4. java中Queue接口

    Queue接口与List.Set同一级别,都是继承了Collection接口.LinkedList实现了Queue接 口.Queue接口窄化了对LinkedList的方法的访问权限(即在方法中的参数类 ...

  5. EditText输入为空button不可点击搜索

    一丶任务详情 二丶改动后演示效果 三丶改动过程 分析:非常明显这里是须要监听EditText,推断输入字符串长度是否不为0来改变Button样式 首先的屡清楚代码逻辑在适当的位子加监听推断是最好的处理 ...

  6. openerp 6.0.2库存业务

    一.复式库存(Double-Entry Stock Management)和库存移动(Stock Move) OpenERP的库存管理采取了独特的复式库存(Double-Entry Stock Man ...

  7. Visual studio之C#实现数字输入模拟键盘

    背景 当前做的一个上位机需运行在工控机上,众所周知,工控机不可能配备键盘,只能是触屏,而我当前的上位机需要输入参数,于是之前的解决办法既是调用Windows自带的OSK.exe虚拟键盘,方法在我的另一 ...

  8. Linux-HUP信号的干扰问题

    在向大家详细介绍Linux HUP信号之前,首先让大家了解下Linux HUP信号,然后全面介绍Linux服务器X,希望对大家有用.想让进程在断开连接后依然保持运行?如果该进程已经开始运行了该如何补救 ...

  9. PHP 导出 CSV 文件用 Excel 打开出现中文乱码

    本篇文章由:http://xinpure.com/php-export-csv-file-opened-by-excel-appear-garbled/ 乱码情况 写了一段导出 CSV 文件的代码,可 ...

  10. AL2018届校招笔试——自然语言处理

    [单选40min+在线编程80min] 单选 1.以下进程的哪些行为不会导致操作系统向该进程发送一个信号?() A. 程序终止退出 B. 访问了一个非法的内存地址 C. 一个该程序正在监听的socke ...