图片一直居中，并且窗口变小图片两端缩小，但是图片还是居中。
1、无论多少行都让文字垂直居中；
小技巧 ie8以上可用；
display：table-cell；vertical-align：middle；
注意变了 table-cell就不能用float和position了，用了的话table-cell的vertical-align不生效了；
table-cell不支持margin但可以用padding；
2、让img在窗口变小时，图片一直居中显示，但不随着窗口缩写而变小，只是随着窗口缩小图片一直居中显示；
img的width设置成最大的宽度，不是百分百，而是一个具体的数值，比如1920px；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} .wrap{ position: relative; min-width: 600px; overflow-x: hidden; } img{vertical-align:bottom;position: relative;width:1920px;left: 50%;margin-left: -960px;} #cont{ position: absolute; top: 200px; left: 50%; width: 200px; height: 200px; background: gray; margin-left: -100px; } </style> </head> <body> <!--父级盒子--> <div class="wrap"> <!--背景图部分--> <img src="hhr_pc1_1.jpg"/> <img src="hhr_pc1_2.jpg"/> <img src="hhr_pc1_3.jpg"/> <img src="hhr_pc1_4.jpg"/> <!--内容部分--> <div id="cont"> aaaa </div> </div> </body> </html>
图片保持
可以加上display：block；
position：releative；
left：50%；
margin-left：-你设置的宽度的一半 ，如-960px；
这样 窗口缩小，图片不缩小 一直保持中间。
父级元素
position: relative; min-width: 600px; overflow-x: hidden;
2、居中的几种方式；
方式一：必须知道居中元素的宽高
top: 50%;
left: 50%;
margin-left:负的宽度一半;
margin-top:负的高度一半;
方式二：必须知道居中元素的宽高
top: 0;
left: 0;
right:0;
bottom:0;
margin:auto;
方式三：优点是可以不知道居中元素的宽和高，但是缺点是文字会变模糊。原因是transform时div的宽度或者高度并不是偶数，移动50%之后，像素点并不是整数，出了小数，和显示像素没有对上。
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
