利用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. LCA最近公共祖先（least common ancestors）

    #include"stdio.h" #include"string.h" #include"iostream" #include" ...

  2. mysql 数据库简介

    1. 什么是数据库 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 我们也可以将数据存储在文 ...

  3. poj3662 Telephone Lines【最短路】【二分】

    http://poj.org/problem?id=3662 Telephone Lines Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  4. Pangolin中opengl的混合（gl_blend）

    Blend 混合是将源色和目标色以某种方式混合生成特效的技术.混合常用来绘制透明或半透明的物体.在混合中起关键作用的α值实际上是将源色和目标色按给定比率进行混合,以达到不同程度的透明.α值为0则完全透 ...

  5. Java不定参数

    先看两个简单的例子,来感受一下Java的不定长度参数 第一个例子: public class VariArgs { public static void main(String[] args) { t ...

  6. postgresql shell发起select操作报错ERROR: relation "tablename" does not exist

    最近安装了一套clourdera manager,其中hive元数据保存在postgresql中,因为今天想看一下hive的元数据信息,就登录了psql,连接到hive元数据库,发起select操作, ...

  7. Flip Game---poj1753（状压+bfs）

    题目链接:http://poj.org/problem?id=1753    题意:是有一个4X4的图,b代表黑色,w代表白色,问最少翻转几次可以把所有的点变成白色或者黑色,每次翻转一个点时,可以把它 ...

  8. php表单身份验证

    1. index.php <form method="post" action="dbtest.php">            姓名:       ...

  9. Unity 补充安装

    当需要下载 安装Unity之时没勾选的一些组件时, 1.去Unity官网点开Unity旧版本 2.找到你的Unity版本,然后只要下载Unity安装程序 3.点开安装程序,去掉已安装组件的勾选,勾选你 ...

  10. [LeetCode] 198. House Robber _Easy tag: Dynamic Programming

    You are a professional robber planning to rob houses along a street. Each house has a certain amount ...