利用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. Spring Cloud微服务开发笔记5——Ribbon负载均衡策略规则定制

    上一篇文章单独介绍了Ribbon框架的使用,及其如何实现客户端对服务访问的负载均衡,但只是单独从Ribbon框架实现,没有涉及spring cloud.本文着力介绍Ribbon的负载均衡机制,下一篇文 ...

  2. Oracle核心技术之 SQL TRACE

    1.SQL TRACE说明: 参数类型 布尔型 缺省值 false 参数类别 动态 取值范围 True|false 2.类型 1)sql trace参数:alter system改变对全局进程影响,如 ...

  3. bit 32/64

    [asm]64位编译32位汇编需要注意的   汇编语言在32位和64位下有区别    32位的汇编在代码前增加.code32    as可以通过--32指定生成32位汇编 在64位系统下ld链接生成3 ...

  4. REQUEST FORM 实例

    https://www.programcreek.com/python/example/51524/flask.request.form

  5. Photoshop制作倒影的两种方法

    图片加了倒影,画面立刻变得生动起来.而用PS,制作倒影是如此的方便. 素材1 将素材1导入文档,ctrl+J复制图层,编辑-变换-垂直翻转将翻转的图层拖至下方 为翻转的图层添加图层蒙版,选中渐变工具, ...

  6. django源码笔记-【1】(转)

    add by zhj:第二段代码有修改 原文:http://www.cnblogs.com/gaott/archive/2012/02/28/2371181.html 前言 Django是一个开放源代 ...

  7. Django ORM之QuerySet

    Django ORM用到三个类:Manager.QuerySet.Model.Manager定义表级方法(表级方法就是影响一条或多条记录的方法),我们可以以models.Manager为父类,定义自己 ...

  8. IO流（7）获取指定文件夹下的所有文件

    /* * 把E:\JavaSE目录下所有的java结尾的文件的绝对路径给输出在控制台. * * 分析: * A:封装目录 * B:获取该目录下所有的文件或者文件夹的File数组 * C:遍历该File ...

  9. Servlet----------Servlet 的映射路径细节

    在使用servlet时候,有些时候都需要自己来配置web.xml文件,在配置的时候,我们可以配置多个<url-pattern></url-pattern> 比如在这里绑定了3个 ...

  10. php页面获取数据库中的数据

    <!DOCTYPE HTML><html>    <head>        <meta charset="utf-8" />   ...