CSS在页面布局中实现div水平居中的方法总结（2）
作者：dudo 来源：dudo博客 发布时间：2008-06-03 12:09:00
标签：布局,css,居中
二、相对定位与负的边距
对于wrap进行相对定位，然后使用负的边距抵消偏移量。这种方法比较简单还很容易实现：
#wrap {
position:relative;
width:760px;
left:50％;
margin-left:-380px
}
这段代码的意思是，设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left:50％含意）；最后我们再从中间位置向左偏移回一半的距离来，这样就实现了水平居中了。
下载地址：
CSS+Div-center.htm （.77 KB）
同样，在设定水平居中前你需要设定一个固定的宽度。
P.S.究竟选择哪个方法？
上面两个方法究竟选择哪种方法好呢？在第一种方法中貌似使用了Hack技术，其实并没有，它是中规中矩的Web标准写法，完全符合规范，因此，两个种方法中完全可以随便的选取其中的任一种进行使用，他们不存在CSS hack的问题。
三、其它的居中方式
上面所说的都是设定了具体宽度的情况下水平居中的实现。有时候我们想做一个弹性布局，或者当一个元素处于一个容器中时我们只想让它居中并不想设定一个具体的宽度。其实这并不是真正的居中布局，就像对一个100％长度的元素来说，你说它是居中对齐还是居左对齐呢？所以所有不高宽度的居中都不是真正的居中。这样的设计我们是使用的像元素的padding来设置的，实际中我们是改变了父元素的容器大小：
如我们希望wrap元素长度随窗口而改变，同时又维持居中，我们就可以这样写：
body {
padding:10px 150px;
}
这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。
下载地址：div-center-css.htm （1.07 KB）
当然这只是“貌似居中”，不过却常常很有用处。
0
投稿猜你喜欢
字符串是Python中最常用的数据类型1、创建字符串1.1 使用 ’ ’ 或 " &quo- 如下所示：import sysfrom PyQt5 import QtCore,QtGuifrom PyQt5.QtWidgets impo
- 随着python的发展越来越好，用python的伙伴也越来越多。本人刚开始接触python的时候用的第一个集成环境就是Anaconda，因为
- 本文实例讲述了mysql数据库创建账号、授权、数据导出、导入操作。分享给大家供大家参考，具体如下：1、账号创建及授权grant all pr
- 前言备受期待的django 2.0已经发布了，最大的一个变化就是不再支持python2.x版本了，这也为我们还在保守使用的2.x的同学们敲响
- 很多设计师都会遇到这样的问题。一个产品会有很多种方式去包装，其中包括很多功能和很多体验。功能越多会被认为越实用，体验越好会被认为越方便。方便
- 为什么我把自己机子上的数据库备份文件往另一台机子上还原不成功？可能是你在Restore的对话框中选项不正确。Restore 有三个选项，分别
- 前言最近经历了一次服务器SQL SERVER 数据库服务器端事务日志爆满，导致服务器数据库写入不进数据的宕机事件，经过此次事件的发生，奉劝各
- 如何在网上查找链接？ 见下：findlinks.html<html><head>
- 在做自动化测试时，遇到两种情况需要判断usb是否已连接上（注，本文仅针对用adb命令来control手机）一种是在开测时（前提是同时要测试多
- 导读前面几章我们以经介绍了怎么批量对excel和ppt操作今天我们说说对word文档的批量操作应用python-docx允许您创建新文档以及
- python循环语句求和1.for循环求和sum1 = 0for i in range(1,101):? ? if i ％ 2 == 0:?
- 背景：使用python脚本传递参数在实际工作过程中还是比较常用，以下提供了好几种的实现方式：一、使用sys.argv的数组传入说明：使用sy
- max() 方法返回其参数最大值：最接近正无穷大的值。语法以下是max()方法的语法：max( x, y, z, .... )参
- json和dictpython中的dict类型要转换为json格式的数据需要用到json库：import json <json>
- 本文实例为大家分享了asp.net存储和读取数据库图片的具体代码，供大家参考，具体内容如下1. 创建asp.net web窗体项目代码如下：
- 每次的大版本更新为全世界的摄影、影视、设计师提供了一系列生产力工具电脑配置符合要求的小伙伴可以尝鲜啦。软件版本越高对电脑的配置要求就越高。目
- 前言最近写了oracle过程，有个ORACLE中dbms_output.put_line输出不了的问题。 花了近一个小时。下面描述一个这解决
- 【OpenCV】⚠️高手勿入! 半小时学会基本操作 ⚠️ 对象测量概述OpenCV 是一个跨平台的计算机视觉库, 支持多语言, 功能强大.
- 请看下面的操作图解。1.使用Sql Server Management Studio 2008 连接数据库。2.选中要导出数据的数据库节点，
