来源：http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html
 
 
CSS 如何使DIV层水平居中
今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,
网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.
可是事实上这样的方法科学吗?
经过网络搜索和亲自实验得出以下结论:
正确的也是对页面构造没有影响的设置如下:
对需要水平居中的DIV层添加以下属性:

margin-left: auto;
margin-right: auto;

经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!
郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.
问题到底出在哪里呢?
感谢网友乐天无用帮忙找出了这个邪门问题的原因.
原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.
问题并不在CSS而在XHTML网页本身.
需要加上这样的代码才能使得上述设置有效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果您希望更为严格的XHTML 1.0 Strict或者XHTML 1.1请查阅相关文档.
以上测试均基于Windows XP SP2版IE6和FireFox 1.0最终版.
如何使DIV居中
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN:
center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:
auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只
要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

如何使图片在DIV 中垂直居中，用背景的方法。举例：
body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif)
#FFF no-repeat center;}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50
30"

如何使文本在DIV中垂直居中
如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body >
<div id="center"><p>test content</p></div>
</body>
</html>
说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。

CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中
<style type="text/css" media=screen>
body
{
text-align: center;
}
#a
{
width: 200px;
height: 400px;
background: #000;
}
#b
{
margin-top: expression((a.clientHeight-50)/2);
width: 50px;
height: 50px;
background: #FFF;
}
#c
{
position: absolute;
left: expression((body.clientWidth-50)/2);
top: expression((body.clientHeight-50)/2);
width: 50px;
height: 50px;
background: #F00;
}
</style>
<div id="a">
<div id="b"></div>
</div>
<div id="c"></div>
另一方法:
<div
style="background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50"></div>

【转】CSS中怎么让DIV居中的更多相关文章

  1. CSS中怎么让DIV居中(转载)

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  2. CSS中怎么让DIV居中

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  3. 几个简单的css设置问题：div居中，ul li不换行 ，内容超出自动变省略号等

    1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...

  4. CSS中让一个div的高度随着另外个一个统计的div的高度变化而变化的代码

     .w1002 .left_part{overflow:hidden; padding-bottom:9999px; margin-bottom:-9999px;display:inline;}

  5. CSS 使用absolute 是<div>居中

    <style>        .col-center-block {            position: absolute;            top: 50%;         ...

  6. CSS中让背景图片居中且不平铺

    background:url(../images/logo.jpg) no-repeat center ;

  7. 讨论CSS中的各类居中方式

    今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居 ...

  8. 新手玩CSS中的一些黑科技

    哎哎 1.鼠标移进网页里,不见了= = *{ cursor: none!important; } 2.简单的文字模糊效果 *{ color: transparent; text-shadow: #11 ...

  9. CSS中"!important"的使用

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

随机推荐

  1. Longest Substring Without Repeating Characters ---- LeetCode 003

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  2. iOS常用正则表达式验证（手机号、密码格式、身份证号等）

    #import @interfaceUtils : NSObject #pragma 正则匹配手机号 + (BOOL)checkTelNumber:(NSString*) telNumber; #pr ...

  3. (Your)((Term)((Project)))

    Description You have typed the report of your term project in your personal computer. There are seve ...

  4. POJ 1269 (直线求交）

    Problem Intersecting Lines (POJ 1269) 题目大意 给定两条直线,问两条直线是否重合,是否平行,或求出交点. 解题分析 主要用叉积做,可以避免斜率被0除的情况. 求交 ...

  5. NSFileHandle 、 沙箱机制 、 属性列表

    1 使用NSFilehandle进行数据读写 1.1 问题 NSFileManager用于实现对文件的操作,而NSFileHandle是IOS提供的对文件内容(二进制数据)进行操作的类,例如数据的读写 ...

  6. 图像和滚动 、 编程规范和Xcode（一）

    1 在界面上以各种模式显示图片 1.1 问题 在ios开发中经常需要展示图片以满足需求和美化界面,本案例将学习如何以代码的方式使用UIImageView视图控件来展示图片,如图-1所示: 图-1 1. ...

  7. Android FM模块学习之二 FM搜索频道

    最近在学习FM模块,FM是一个值得学习的模块,可以从上层看到底层.上层就是FM的按扭操作和界面显示,从而调用到FM底层驱动来实现广播收听的功能. 看看FM启动流程:如下图: 先进入FMRadio.ja ...

  8. jQuery：如何验证某个元素是否为空

    [要求]:使用jQuery 如何验证某个元素是否为空   ♪ 答: <body> <div id="div1">aa</div> <inp ...

  9. setInterval 函数传参（方法一）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 标准IO操作

    前言 本文介绍使用java进行简单的标准IO操作. 操作步骤 1. 定义一个Scanner对象 2. 调用该对象的input函数族 (参见下面代码) 3. input函数的返回结果即是获取到的输入 示 ...