利用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. 利用Python读取外部数据文件

      不论是数据分析,数据可视化,还是数据挖掘,一切的一切全都是以数据作为最基础的元素.利用Python进行数据分析,同样最重要的一步就是如何将数据导入到Python中,然后才可以实现后面的数据分析.数 ...

  2. vue之创建组建

    vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例中使用组件吧! ...

  3. mysql max(),min()的优化

    Select tables optimized away(选择表优化)

  4. ELk之使用kibana展示访问IP地图

    参考文档:http://blog.51cto.com/ls40905250/1915280 https://blog.csdn.net/zsjwish/article/details/79792212 ...

  5. HDU-1166敌兵布阵(线段树)

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submissi ...

  6. 卿学姐与公主 UESTC - 1324 分块模板题

    题意:http://acm.uestc.edu.cn/#/problem/show/1324 中文题,自己看喽. 题解:分块模板,update时顺便更新块属性.ask时先判掉belong[l]==be ...

  7. 运行Chromium浏览器无法登录谷歌账号因为缺少google api密钥

    管理员身份运行CMD,然后依次输入以下三行内容(因为比较长,最好拷贝,因为某原因粘贴第一行后,我输入了下,结果第一次没成功,可能是输入错误了.): setx GOOGLE_API_KEY " ...

  8. J - Fire!---UVA 11624

    题目链接 题意:J代表Joe的位置,F代表火的起点,下一刻火将会向四周扩散,求Joe逃离的最短时间,如果不能逃离输出IMPOSSIBLE; 注意火的起点可能不止一处 可以用两次bfs分别求出人到达某个 ...

  9. webpack笔记二——entry

    entry是输入目录文件,有三种形式 1.对象键值对形式 entry: { main: './src/script/main.js', b: './src/script/b.js' }, 注意的是输出 ...

  10. mysql transaction 事务

    1.事务简介 一个"最小的"不可再分的"工作单元". 一个事务通常对应了一个完整的业务.如:银行的转账功能,a转账给b,a扣钱,b加钱. 一个事务包含一条或多条 ...