CSS-长图水平居中

场景：客户方给我了一张1920px的长图给我，然后告诉我在屏幕不到1920px时候，屏幕显示图片的中心位置，左右边缘可以不要。

当屏幕小于1000px的时候，图片显示中心部分1000px的图片，且可以出现滚动条（意思是当屏幕小于1000，用户拖动滚动条可以看到图片的中心区的1000px）

用户可以随时拖拉浏览器的宽

下面我画图显示吧

当屏幕大于1000px 小于1920时候，显示方式 下面屏幕是指浏览器窗口

屏幕要显示图片的中心区域

当浏览器的窗口拖拉小于1000px的时候，显示图片1000px的宽度，浏览器并显示滚动条

然而屏幕小于了1000px，但是有滚动条出现，然是可以显示图片中心区域1000px的。

 

方案：1.让屏幕的中心线和图片的中心线对齐就可以。

　　   2.让图片作为背景图 background:url() no-repeat scroll center top;然后设置图片对应的高就实现了( 这个我们暂时不说这个方案)

 

实现技术：

source.css

index.html

 

可能有人问，为什么left:50% ,margin-left:-960px吧？

1.因为div右移50%，那么这个div的左边的边界就和屏幕的中心线对齐了

2.然后这个div又左移960px（1920/2=960），那是因为这个div里面放入的就是图片元素，左移960，这样刚好图片的中心和屏幕的中心线对齐了。

 

转载于:https://www.cnblogs.com/kevinlifeng/p/5077900.html