<!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. 有关ubuntu16.04进行sudo apt-get update更新时出现：‘。。。N: 无法安全地用该源进行更新，所以默认禁用该源。。。’等问题解决方案

    关于ubuntu16.04在 sudo apt-get update 时出现如下错误: 针对这种情况,本人结合网上的解决方案总结出以下方案,三条命令搞定,希望有用. 1. 进入 sources.lis ...

  2. 项目部署问题：xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题

    一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...

  3. hdoj-1301-Jungle Roads【最小生成树】

    Jungle Roads Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  4. 2017.12.12 架构探险-第一章-从一个简单的web应用开始

    参考来自:<架构探险>黄勇 著 1 使用IDEA搭建MAVEN项目 1.1 搭建java项目 (1)创建java项目 为了整个书籍的项目,我创建了一个工程,在这个工程里创建了每个章节的mo ...

  5. webpack+vuecli打包常见的2个坑

    第一个坑: 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的.但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径 ...

  6. 理解和使用 Promise.all 和 Promise.race

    一.Pomise.all的使用 Promise.all可以将多个Promise实例包装成一个新的Promise实例.同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回 ...

  7. 2 自己编写：AppDelegate，CCApplication，CCApplicationProtocol

    1 CCApplicationProtocol.h /* * CCApplicationProtocol.h * *  Created on: 2014年10月19日 *      Author: t ...

  8. windows下更换jdk运行当前jar包处理命令一则

    可在文本文档中新建以下内容 set JAVA_HOME=C:\jdk1.7.0_67set CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOMe%\lib\too ...

  9. ORA-01589: 要打开数据库则必须使用 RESETLOGS 或 NORESETLOGS 选项

    产生这个的原因可能是由于数据库突然停止,没有来得及将缓存区中的LOG归档,导致下次开启时不能匹配日志文件. 数据库中的三个日志文件挨个试,第二个就匹配上了

  10. 将object格式转为json格式

    在页面内容显示时,有时需要用到json格式.但数据库内容的显示,需要将数据库中获取的格式转为json: using Newtonsoft.Json;public static string ToJso ...