<!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. jquery触发/失去焦点事件

    触发焦点: $("Element").focus() 触发每一个匹配元素获得焦点事件. $("Element").focus(function) 事件会在获得焦 ...

  2. form表单提交时选择性传值到后台

    正常情况下form表单提交会把表单内的内容提交到后台,但是如果有些内容只是作为展示或者是标记而不想传到后台,我们采用如下方法: jsp页面如下,我们不想提交id为userIdMark和pwdMark的 ...

  3. Java反转单链表

    class Node { private int data; private Node nextNode; public Node(int data) { this.data = data; } pu ...

  4. 使用RMAN和控制文件备份删除归档日志的SHELL脚本--RED HAT 5 LINUX 64

    在ORACLE用户下的定时器设置 [oracle@SHARKDB dbscripts]$ crontab -l# minute hour day month week15 1  * * 0  sh / ...

  5. 一个故事讲清NIO

    假设某银行只有10个职员.该银行的业务流程分为以下4个步骤: 1) 顾客填申请表(5分钟): 2) 职员审核(1分钟): 3) 职员叫保安去金库取钱(3分钟): 4) 职员打印票据,并将钱和票据返回给 ...

  6. linux 设置 亮度

    调整系统运行的配置文件位于 /sys/class/ 文件夹下. 调整亮度在 /sys/class/backlight/XXXX/brightness XXXX 是因为使用的驱动不一样,名称就会不一样, ...

  7. My SqL 语法大全

    一.SQL速成  结构查询语言(SQL)是用于查询关系数据库的标准语言,它包括若干关键字和一致的语法,便于数据库元件(如表.索引.字段等)的建立和操纵.  以下是一些重要的SQL快速参考,有关SQL的 ...

  8. CDN新应用和客户

    目前的CDN配置服务主要应用于证券.金融保险.ISP.ICP.网上交易.门户网站.大中型公司.网络教学等领域.另外在行业专网.互联网中都可以用到,甚至可以对局域网进行网络优化.利用CDN,这些网站无需 ...

  9. vue - webpack.dev.conf.js for node-portfinder

    描述:获取当前可用的port. (vue-cli配置好了,一旦端口被占用,报错,再次运行时会打开:8080+1,依次类推...8080+n) 官网地址:https://www.npmjs.com/pa ...

  10. 基于paramiko进行远程执行Linux命令

    直接贴一段代码import paramiko class remote_start(object): def __init__(self,host,username,pwd): self.ssh = ...