css中图片使用绝对定位实现居中效果

存在问题

问题如标题所说，咱们在给图片设置绝对定位的时候就会遇到无法居中图片的问题。怎么解决？margin:0 auto?

很显然这个时候设置margin是无效的。

解决方案

假设咱们的图片宽度为100px；那我们就这么写：

position:absolute;

left:50%;

margin-left:-50px; （此处margin-left的值写该图片宽度的一半）

 

解释：

1、使用绝对定位，设置left值将图片移到正中间，此时图片的左边框在屏幕的中线位置

2、设置margin-left，注意值为负数，咱们把图片向左移图片宽度一半的位置

 

这样我们的问题就解决了~