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