利用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. 关于Django的序列化

    阅读目录 Django支持的序列化格式 Django的序列化 Django支持的序列化格式 1 2 3 4 Identifier Information xml Serializes to and f ...

  2. 服务端渲染（ssr）初了解

    之前接触的比较多的是SPA单页面应用,前端路由渲染,对于node服务端渲染刚开始了解到,服务端渲染的话相对于SPA来说有助于SEO优化,首屏加载更快. 和之前的SPA项目不同,之前公司spa的发布部署 ...

  3. ubuntu16.04下安装wps

    首先下载安装 下载 wps for linux 在终端用命令安装 sudo dpkg -i wps-office_10.~a21_amd64.deb 字体缺失问题 下载 wps_symbol_font ...

  4. codeforces 592B/C

    题目链接:http://codeforces.com/contest/592/problem/B B. The Monster and the Squirrel time limit per test ...

  5. FW Windows下DOS命令大全(经典收藏)---mklink

    dos command port-->PID: netstat -ano | findstr port | tasklist |findstr "" Windows SYST ...

  6. c#导出ListView中的数据到Excel表格

    1.添加组件:Microsoft.Office.Interop.Excel 步骤:右键点击“引用”--->添加引用--->COM--->Microsoft.Office.Intero ...

  7. nginx的一些基本功能

    1.静态HTTP服务器 首先,Nginx是一个HTTP服务器,可以将服务器上的静态文件(如HTML.图片)通过HTTP协议展现给客户端. 配置:[plain] view plain copy serv ...

  8. LightOJ 1038 - Race to 1 Again（期望+DP）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1038 题意是:给你一个N (1 ≤ N ≤ 105) 每次N都随机选一个因子d,然后让 ...

  9. Monkey and Banana---hdu1069（dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1069 题意就是给你n种长方体每种类型不限制个数,然后我们把它们一个个堆起来,并且要满足下面的要比上面的 ...

  10. Redis压力测试

    然后依次测试如下命令: 上面第三个命令写错了,要改为: