必备：「CSS」图片实现上下居中、左右居中的另类实现方法

　　在制作网页的很多时候为了页面美观都需要图片能够做到上下居中、左右居中。网上现实的方式方法也有很多，这里分享我经常使用的一种方法。

　　实现原理

　　1、先准备一张透明的png图片。

　　2、对这个图片定义一个 Css样式，添加这几个属性：

　　background-position: center；背景图片居中

　　background-size: contain；显示完整背景图片

　　background-repeat: no-repeat；背景图不重复

　　3、然后把要显示的图片作为背景图片。

　　这样图片就不会随着尺寸不同错位显示。展示的时候如果需要显示正方形图片，只需要制作一个1x1比例的png图片，另外可以根据自己的要求制作png图片。

　　升级处理

　　在展示图片的时候，可能有些小伙伴不喜欢把图片放到style样式里面，可能会感觉到看起来怪怪的。

　　我们想要的可能是这样的展示方式

　　这样其实也简单，我们可以借助于 jquery 来实现这个功能。代码如下：

　　PHP 实现

　　PHP 实现生成图片也分为二种

　　1、图片上传的时候，按后台设置的尺寸生成。

　　2、图片预览的时候，按URL中设置的参数生成。

　　github地址