利用margin属性可以实现div居中布局，把div的左边距和右边距设置为auto即可，代码如下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>居中测试</title>

    </head>

    <body>

        <div style="margin:0 auto;width:70%;height:200px;background-color:#b0e0e6;">

        </div>

    </body>

</html>

居中效果

div居中布局的更多相关文章

  1. Flex 布局 （两个div居中自适应 宽度变小变一列，宽度够就是两列）

    https://www.runoob.com/w3cnote/flex-grammar.html display: flex; justify-content: center; align-items ...

  2. CSS布局，div居中，文字居中

    .main { width: 100%; margin: 0 auto; .banner { img { width: 100%; } } .article { margin-bottom: 100p ...

  3. bootstrap之div居中

    bootstrap之div居中 偏移列 偏移是一个用于更专业的布局的有用功能.它们可用来给列腾出更多的空间.例如,.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果 ...

  4. CSS居中布局总结【转】

    居中布局 <div class="parent"> <div class="child">demo</div> </d ...

  5. CSS居中布局总结

    居中布局 <div class="parent"> <div class="child">demo</div> </d ...

  6. (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  7. (转)Div+CSS布局入门

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  8. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  9. 深度理解div+css布局嵌套盒子

    1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...

随机推荐

  1. Java clone克隆方法 --深拷贝--浅拷贝 --原型模型

    什么是深拷贝? 什么是浅拷贝? 创建一个对象的方法有几种? 默认的Object方法中的clone是深拷贝还是浅拷贝? 为什么说很多深拷贝都是不彻底的深拷贝? 什么是原型模型,什么是原型模式? 原型模型 ...

  2. numpy中的reshape中参数为-1

    上篇文章中的reshape(-1,2),有的时候不明白为什么会有参数-1,可以通过查找文档中的reshape()去理解这个问题 根据Numpy文档(https://docs.scipy.org/doc ...

  3. [LintCode] Find the Missing Number 寻找丢失的数字

    Given an array contains N numbers of 0 .. N, find which number doesn't exist in the array. Example G ...

  4. jQuery ajax的前台代码编写

    jQuery ajax的前台代码: <script type="text/javascript" src="/include/jquery/jquery-1.1.3 ...

  5. HDU 3903 Trigonometric Function（数学定理）

    Trigonometric Function Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 125536/65536 K (Java/Oth ...

  6. HDU 5636 Shortest Path(Floyed，枚举)

    Shortest Path Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Tot ...

  7. Linux下pip使用国内源

    pip国内的一些镜像   阿里云 http://mirrors.aliyun.com/pypi/simple/   中国科技大学 https://pypi.mirrors.ustc.edu.cn/si ...

  8. session hijacking-php.ini

    wamp->php.ini ; This option forces PHP to fetch and use a cookie for storing and maintaining; the ...

  9. ie浏览器总跳转到 http://hao.360.cn

    起因在于  开启360某些防护之后,若出现使用ie无法打开网页的情况,那么就会跳转到http://hao.360.cn .把360的防护能关的都关掉,就不会跳转了. 第二个问题:chrome可以打开网 ...

  10. HTML_body标签

    常用符号:空格:&nbsp 大于号:&gt 小于号: &lt 块级标签:H标签(加大加粗),P标签(段落间有间距),DIV(白板) 行内标签:SPAN标签(白板) <!- ...