【Web前端】CSS div居中显示
1.内层需要居中的div宽度小于外层，这里的例子是内层宽度300px，外层500px；
2.内层需要居中的div宽度大于外层，这里的例子是内层宽度700px，外层500px，居中显示里层div，两侧超出部分隐藏；
把一个宽度小于父元素的层居中显示很简单，只需要设置该元素的margin值，将left和right设置为auto即可：
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4 <title></title>
5 <style type="text/css">
6 .outer{
7 width:500px;
8 background-color:#999999;/*外层背景用灰色*/
9 padding:10px 0px;/*指定一个上下内边距便于查看效果*/
10 text-align:center;
11 }
12 .inner{
13 width:300px;
14 height:50px;
15 background-color:#FF0000;/*内层背景用红色*/
16 margin:0 auto;
17 }
18 </style>
19 </head>
20
21 <body>
22 <div class="outer">
23 <div class="inner"></div>
24 </div>
25 </body>
26 </html>
但是，当里面的div宽度大于外层时，这个就不起效果了，为了兼顾高分辨率屏幕的效果，必须处理这个问题，我碰到的需求是要保证主体大小，当屏幕分辨率低时两侧修饰物不需要全部显示，尝试着沿用上面的思路，试了许多都没有作用，用js写出来的代码在调整屏幕大小的时候不会跟着调整，所以还是要靠css，解决方法是：（1）将里层div的left设置为50%，即让里层div的左边界处在外层div的水平中央位置。（2）设置里层div的左侧外边距为其宽度一半的负值，里外层div的中心线就会重合，代码如下：
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4 <title></title>
5 <style type="text/css">
6 .outer{
7 position:relative;/*提醒：如果"position"值为"static"，那么设置"left"将不产生任何效果*/
8 width:500px;
9 left:150px;
10 background-color:#999999;/*外层背景用灰色*/
11 padding:10px 0px;/*指定一个上下内边距便于查看效果*/
12 text-align:center;
13 overflow:hidden;/*超出部分隐藏*/
14 }
15 .inner{
16 position:relative;
17 width:700px;
18 height:50px;
19 left:50%;/*移到外层div的水平中心*/
20 background-color:#FF0000;/*内层背景用红色*/
21 margin-left:-350px;/*左移700/2的像素距离*/
22 }
23 </style>
24 </head>
25 <body>
26 <div class="outer">
27 <div class="inner"></div>
28 </div>
29 </body>
30 </html>
这个方法也比较简单，只是之前没有碰到过这样的要求，一时想不到，浪费了不少时间。