<!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. Tomcat之内存、并发、缓存方面优化方法

    一.Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 java_OPTS 参数. JAVA_OPTS ...

  2. 【笔记】探索js 的this 对象 (第三部分)

    了解完函数的调用区域是如何影响this 对象的,还有this 的各种绑定方式以及各种绑定方式的优先级后 最后一部分,来了解一下this 的一些例外情况 1.被忽略的this 例如在使用bind 方法时 ...

  3. [Tools] Batch Create Markdown Files from a Template with Node.js and Mustache

    Creating Markdown files from a template is a straightforward process with Node.js and Mustache. You ...

  4. 在Spring Boot项目中使用Spock框架

    转载:https://www.jianshu.com/p/f1e354d382cd Spock框架是基于Groovy语言的测试框架,Groovy与Java具备良好的互操作性,因此可以在Spring B ...

  5. .css()与.addClass()设置样式的区别

    对于样式的设置,addClass与css方法两者之间有什么区别? 可维护性: .addClass()的本质是通过定义个class类的样式规则,给元素添加一个或多个类.css方法是通过JavaScrip ...

  6. rails引入bootstrap

    1.在Gemfile中增加 gem 'bootstrap-sass', '~> 3.2.0.2'2.bundle install3.把assets/stylesheets/application ...

  7. 在Lucene或Solr中实现高亮的策略

    一:功能背景 近期要做个高亮的搜索需求,曾经也搞过.所以没啥难度.仅仅只是原来用的是Lucene,如今要换成Solr而已,在Lucene4.x的时候,散仙在曾经的文章中也分析过怎样在搜索的时候实现高亮 ...

  8. struts result动态结果集 带参数的结果集

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC     &qu ...

  9. 应用zip压缩的javascript以及Egret H5游戏实战

    代码地址如下:http://www.demodashi.com/demo/11039.html 主要起因是策划对最快进入登录界面有硬性要求(3秒),那么最开始加载的文件越小越好.对H5的游戏程序进行压 ...

  10. jrebel 7免费激活（非破解） 和 IntelliJ Idea 2017 免费激活方法

    转自http://www.cnblogs.com/suiyueqiannian/p/6734412.html http://www.cnblogs.com/suiyueqiannian/p/67540 ...