div背景图片居中

      许多 web 系统先是登入一个 login 页面， login 页面一般嵌入了一个背景图片，上面写明是什么什么系统，图片上面是一个登录用户名和密码的表单。为了美观，一般情况是把这个背景图片水平和垂直居中。如果背景图片放在了一个 div 里面，水平垂直居中可由如下样式实现

DIV {

  background-image:url(..../loginPic.jpg);       // 图片来源

  background-repeat:no-repeat;                    // 图片不重复

  background-position:center center              // 设置水平和垂直居中

}

     但有时这几个样式不起作用，不能让背景图片居中，这其中可能有各种浏览器兼容的问题，也可能是外层样式干扰的问题，比如包含 DIV 的 BODY 元素又作了一些样式设置，对 DIV 的样式设置造成干扰，这时你可能不知怎样定位背景图片，不能肯定究竟是哪一个样式能使图片居中。为解决问题，不妨在 DIV 中引入样式 margin:a,b,c,d ， abcd 分别表示背景图片的上边、右边、下边、左边离屏幕边沿的距离，根据不停的观察图片的位置实时的调整距离，直到图片居中，同时还克服了浏览器兼容的老大难问题，这也是样式设置太多太杂时不是办法中的办法。

 

如若转载，请说明出处！ http://blog.csdn.net/xukunddp