前端每日一题：关于水平居中

请实现个层，里面有张图片，每次层显示图片都在当前窗口水平垂直居中，图片位置始终在窗口中间，上下滚动不受影响 

 

----------------------------------------------以下为两位同仁的回答---------------------------------------------------------------

答题者答案一：

<div style="position:absolute; z-index: 1010; left: 50%; top: 50%; margin: -10px -50px;">
<img alt="" src="/img/blueloading.gif" style="" />
</div>

 

答题者答案二：

<div style="position:fixed; z-index: 1010; left: 50%; top: 50%; margin: -10px -50px;">
<img alt="" src="/img/blueloading.gif" style="" />
</div>

 

很明显回答的一和二区别在于 position 是 absolute 还是 fixed，其实最主要的区别在于答题者看问题的深度，关键在“图片位置始终在窗口中间，上下滚动不受影响”，设置为fixed则完全满足这个需求，而设置为absolute 则窗口放大缩小或者滚动后，图片就不会始终在窗口中间了。