css 居中问题
CSS居中问题一直是大家比较关注的问题,在此前的CSS在线的文章中也曾多次提到过CSS居中的相关话题,今天对CSS居中问题做一个汇总。
CSS居中问题，根据居中对象划分主要包括：DIV居中,图片居中,以及文字居中。而根据居中方向划分为：水平居中和垂直居中。下面让我们来一一详述：
CSS 设置水平居中
A.如何设置CSS实现DIV的水平居中
CSS样式
div {margin-left: auto; margin-right: auto; }这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果。
有时候我们还可以简写为 div { margin:0px auto; }但这样的简写法，如果你调整 margin-top 或者 margin-bottom 就会失去CSS居中的水平居中效果,所以最好还是按上一种写法比较好
代码实例：
这种方式的缺点是：要设定容器的宽度，在比较旧的IE浏览器版本上显示不正常
B.设置TEXT-ALIGN属性实现居中
这种做法是hack，但是因为能兼容大多数浏览器，所以也经常被应用。之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也给我们带来了额外的工作。
body{text-align:center}
因为如此设置会将父容器中所有的子元素的text-align属性全部默认为居中，因此不得不对其中需要居左或居右的元素添加text-align使得画面呈现我们需要的样子。
代码实例：
这种方式的缺点是：子元素的默认属性也变成了居中
C.组合使用自动外边距和文本对齐
为了弥补上面两种方式的缺点,组合使用自动外边距和文本对齐,即在设置了text-align的容器中再嵌套一个容器,将子容器的text-align恢复为正常,并设置子容器的自动外边距。但这仍然不算完美的解决办法
代码实例：
D.负外边距解决方案
负外边距解决方案也是一种通过CSS实现元素居中的办法,但是远不是仅仅为元素添加负外边距这么简单，这种方法需要同时使用绝对定位和负外边距两种技巧。
下面是该方案的具体实现方法。首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。
然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。
CSS 设置垂直居中
A.如何设置CSS实现DIV的垂直居中
设置DIV等容器元素的垂直举重可以通过在CSS中使用expression根据父容器的高度和宽度,来计算确定DIV的margin-left和margin-top位置，从而实现div的垂直居中
代码实例:
虽然这种办法能够实现div的垂直居中,但是仍然是不推荐使用,因为对浏览器资源要求比较高,另外expression只是在IE5.0后才支持。
B.如何设置CSS实现图片的垂直居中
对这个CSS居中问题,我们可以使用设置背景图片的方法,#samplediv{background: url("path") #FFF no-repeat center;}关键就在于这个Center属性，它表示让该背景图片在容器中居中。你也可以把Cener换成Top Left或者直接写上数字来调整它的位置。
代码实例:
C.如何设置CSS实现文字的垂直居中
文字的垂直居中可以用增高行距的办法实现垂直居中，示范代码如下：
[CSS在线]-示例代码#samplediv{ MARGIN-RIGHT: auto; MARGIN-LEFT: auto; height:200px; vertical-align:middle; line-height:200px; }
<div id="samplediv"><p>垂直居中的文字</p></div>
代码说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。
代码实例:
本文来自CSS在线：http://www.csscss.org/cssarticle/2010125165.shtml
CSS居中问题，根据居中对象划分主要包括：DIV居中,图片居中,以及文字居中。而根据居中方向划分为：水平居中和垂直居中。下面让我们来一一详述：
CSS 设置水平居中
A.如何设置CSS实现DIV的水平居中
CSS样式
div {margin-left: auto; margin-right: auto; }这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果。
有时候我们还可以简写为 div { margin:0px auto; }但这样的简写法，如果你调整 margin-top 或者 margin-bottom 就会失去CSS居中的水平居中效果,所以最好还是按上一种写法比较好
代码实例：
1 [CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html>
3 <head>
4 <title>CSS在线-示例</title>
5 <style type="text/css">
6 #divsample {
7 margin-left : auto ;
8 margin-right : auto ;
9 background : red ;
10 width : 800px ;
11 height : 600px ;
12 }
13 </style>
14 </head>
15 <body>
16 <div id="divsample">设置CSS样式实现DIV居中</div>
17 </body>
18 </html>
这种方式的缺点是：要设定容器的宽度，在比较旧的IE浏览器版本上显示不正常
B.设置TEXT-ALIGN属性实现居中
这种做法是hack，但是因为能兼容大多数浏览器，所以也经常被应用。之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也给我们带来了额外的工作。
body{text-align:center}
因为如此设置会将父容器中所有的子元素的text-align属性全部默认为居中，因此不得不对其中需要居左或居右的元素添加text-align使得画面呈现我们需要的样子。
代码实例：
[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在线-示例</title>
<style type="text/css">
body { text-align : center }
#divsample {
background : red ;
width : 800px ;
height : 600px ;
}
</style>
</head>
<body>
<div id="divsample">这时DIV中的文字也居中了</div>
</body>
</html>
这种方式的缺点是：子元素的默认属性也变成了居中
C.组合使用自动外边距和文本对齐
为了弥补上面两种方式的缺点,组合使用自动外边距和文本对齐,即在设置了text-align的容器中再嵌套一个容器,将子容器的text-align恢复为正常,并设置子容器的自动外边距。但这仍然不算完美的解决办法
代码实例：
1 [CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html>
3 <head>
4 <title>CSS在线-示例</title>
5 <style type="text/css">
6 body { text-align : center }
7 #container {
8 margin-left : auto ;
9 margin-right : auto ;
10 background : red ;
11 width : 800px ;
12 height : 600px ;
13 text-align : left ;
14 }
15 #samplediv
16 {
17 width : 300px ;
18 height : 200px ;
19 background : blue ;
20 }
21 </style>
22 </head>
23 <body>
24 <div id="container">
25 <div id="samplediv">
26 文字和子容器仍默认居左显示
27 </div>
28 </div>
29 </body>
30 </html>
D.负外边距解决方案
负外边距解决方案也是一种通过CSS实现元素居中的办法,但是远不是仅仅为元素添加负外边距这么简单，这种方法需要同时使用绝对定位和负外边距两种技巧。
下面是该方案的具体实现方法。首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。
然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。
1 [CSS在线]-示例代码#container {
2 position : absolute ;
3 left : 50% ;
4 width : 800px ;
5 margin-left : -400px ;
6 }
7 代码实例:
8
9 [CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
10 <html>
11 <head>
12 <title>CSS在线-示例</title>
13 <style type="text/css">
14 body { text-align : center }
15 #container {
16 position : absolute ;
17 left : 50% ;
18 width : 800px ;
19 margin-left : -400px ;
20 background : red ;
21 text-align : left ;
22 }
23 #samplediv
24 {
25 width : 300px ;
26 height : 200px ;
27 background : blue ;
28 }
29 </style>
30 </head>
31 <body>
32 <div id="container">
33 <div id="samplediv">
34 文字和子容器仍默认居左显示
35 </div>
36 </div>
37 </body>
38 </html>
CSS 设置垂直居中
A.如何设置CSS实现DIV的垂直居中
设置DIV等容器元素的垂直举重可以通过在CSS中使用expression根据父容器的高度和宽度,来计算确定DIV的margin-left和margin-top位置，从而实现div的垂直居中
代码实例:
1 [CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html>
3 <head>
4 <title>CSS在线-示例</title>
5 <style type="text/css" media=screen>
6 body
7 {
8 text-align : center ;
9 }
10 #a
11 {
12 width : 200px ;
13 height : 400px ;
14 background : red ;
15 }
16 #b
17 {
18 margin-top : expression((a.clientHeight-50)/2) ;
19 width : 50px ;
20 height : 50px ;
21 background : blue ;
22 }
23 </style>
24 </head>
25 <body>
26 <div id="a">
27 <div id="b"></div>
28 </div>
29 </body>
30 </html>
虽然这种办法能够实现div的垂直居中,但是仍然是不推荐使用,因为对浏览器资源要求比较高,另外expression只是在IE5.0后才支持。
B.如何设置CSS实现图片的垂直居中
对这个CSS居中问题,我们可以使用设置背景图片的方法,#samplediv{background: url("path") #FFF no-repeat center;}关键就在于这个Center属性，它表示让该背景图片在容器中居中。你也可以把Cener换成Top Left或者直接写上数字来调整它的位置。
代码实例:
1 [CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html>
3 <head>
4 <title>CSS在线-示例</title>
5 <style type="text/css">
6 body { text-align : center }
7 #container {
8 position : absolute ;
9 left : 50% ;
10 width : 800px ;
11 margin-left : -400px ;
12 }
13 #samplediv
14 {
15 width : 600px ;
16 height : 600px ;
17 background : url("/UploadFile/200905/19/1554522229.jpg") red no-repeat center ;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="container">
23 <div id="samplediv">
24 </div>
25 </div>
26 </body>
27 </html>
C.如何设置CSS实现文字的垂直居中
文字的垂直居中可以用增高行距的办法实现垂直居中，示范代码如下：
[CSS在线]-示例代码#samplediv{ MARGIN-RIGHT: auto; MARGIN-LEFT: auto; height:200px; vertical-align:middle; line-height:200px; }
<div id="samplediv"><p>垂直居中的文字</p></div>
代码说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。
代码实例:
1 [CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html>
3 <head>
4 <title>CSS在线-示例</title>
5 <style type="text/css">
6 body { text-align : center }
7 #container {
8 position : absolute ;
9 left : 50% ;
10 width : 800px ;
11 margin-left : -400px ;
12 }
13 #samplediv
14 {
15 width : 400px ;
16 height : 200px ;
17 vertical-align : middle ;
18 line-height : 200px ;
19 background : red ;
20 }
21 </style>
22 </head>
23 <body>
24 <div id="container">
25 <div id="samplediv">
26 <p>垂直居中的文字</p>
27 </div>
28 </div>
29 </body>
30 </html>
本文来自CSS在线：http://www.csscss.org/cssarticle/2010125165.shtml