假设有一个布局，希望让其中的容器div在屏幕上水平居中，则只需要定义div的宽度，然后将水平外边距设置为auto

<body>

    <div class="wrapper"> </div>

</body>

.wrapper{

    width:920px;

    margin:0 auto;

}

注意：上述方法在现代浏览器中都是有效的，但是，混杂模式中的IE 5.x和IE 6不支持margin:auto声明，但IE将text-align:center误解为让所有东西居中，而不只是文本，可以利用这一点，具体方法是让主体标签中的所有东西居中，包括容器div，然后让容器的内容重新向左对齐：

body{

    text-align:center;

}

.wrapper{

    width:920px;

    margin:0 auto;

    text-align:left;

}

ch8 让div居中--使用外边距的更多相关文章

  1. CSS2系列：外边距合并问题(margincollapse)

    外边距合并 w3介绍这个问题地址:https://www.w3.org/TR/CSS2/box.html#collapsing-margins 当两个垂直方向外边距相遇,它们将形成一个折叠外边距. 合 ...

  2. CSS外边距合并（塌陷/margin越界）

    原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...

  3. css常用属性：居中展示、内边距、外边距

    1.横向居中.纵向居中 2.纵向展示3个块级(div标签即可纵向展示) 3.横向展示3个块级 4.在横向块级上加上边框的两种方法 法一:在父级div上加上和样式一样高的height 法二:在父级div ...

  4. "margin塌陷现象"div盒子嵌套盒子外边距合并现象

    问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” .header2 设定 ...

  5. 内层div的margin-top影响外层div——引出外边距合并Collapsing margins

    内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...

  6. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  7. bootstrap之div居中

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

  8. css内边距与外边距的区别

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...

  9. (转)css内边距与外边距的区别，精辟啊

    css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...

随机推荐

  1. js加密（八）新浪微博登录

    1. url: https://weibo.com/ 2. target: 登录 3. 分析.由于需要填写验证码,本篇只分析破解用户名和密码加密部分,不做验证码识别. 3.1 老规矩,F12,随便输入 ...

  2. css3的一些特效

    前段时间有位同事分享了一个网站,里边是一些css3特效,看着挺好,分享一下: [http://daneden.github.io/animate.css/ ] 所有的特效都集中在一个css层叠样式表中 ...

  3. jquery-1.10.2_d88366fd.js和jquery-3.1.0.min.js 在用touch事件时候， event.changedTouches[0]报错的问题。

    1.animation动画:(注意如果这个动画是一开始就执行的,在pc端就要用px,在手机端用rem,如果在pc端展示页面,但用的是rem为单位,这时候动画一开始就执行,因为根字体大小还没准备好,动画 ...

  4. Win Oracle 监听文件配置参考

    Win lister.ora配置参考 # listener.ora Network Configuration File: C:\app\Administrator\product\\dbhome_1 ...

  5. 模块学习-shutil

    高级的 文件.文件夹.压缩包 处理模块 shutil.copyfileobj(fsrc, fdst[, length]) 将文件内容拷贝到另一个文件中,可以部分内容 shutil.copyfile(s ...

  6. Nexus-FEX基础配置

    1.FEX基本配置feature fex fex 100  pinning max-links 1  >>>>该值默认就是1  description "FEX100 ...

  7. 洛谷P2758编辑距离（线性DP)

    题目描述 设A和B是两个字符串.我们要用最少的字符操作次数,将字符串A转换为字符串B.这里所说的字符操作共有三种: 1.删除一个字符: 2.插入一个字符: 3.将一个字符改为另一个字符: !皆为小写字 ...

  8. CDH

    CDH 1.CDH简介 CDH 2.Cloudera Manager的安装     软件下载地址: 链接:https://pan.baidu.com/s/1C5HpiVEOtH_4PjylyJaXvA ...

  9. 激活win10企业版，亲测可用，（win7步骤相同，请自行测试）

    其他版本我没试过,亲们可以尝试! win7神key win7神key1:2HYJ4-V71WM-BAF6Y-G2BTH-X8QOD win7神key2:9LM54-Z3LQ1-5IRAN-T4JNI- ...

  10. Java IO流详解（三）——字节流InputStream和OutPutStream

    我们都知道在计算机中,无论是文本.图片.音频还是视频,所有的文件都是以二进制(字节)形式存在的,IO流中针对字节的输入输出提供了一系列的流,统称为字节流.字节流是程序中最常用的流.在JDK中,提供了两 ...