做为一个前端设计人员，对于产品展示页面的设计一定不会陌生，其中产品图片摆放是必定经历的一步，并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中，实现也是相当的方便，唯一不足之处就是结构繁锁，那么今天和大家一起看几种不是使用talbe方法实现产品图片水平垂直居中的方法。
图片水平垂直居中存在的问题
所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），并且图片位居此容器正中间（中间是指元素容器的正中间），而图片不是以背景图片（background-image）形式展示，是以<img>元素形式展示的。如下图所示：
大家都知道，如果其中img有明确的尺寸，并且图片尺寸都是一致的，要实现其水平垂直居中一件非常容易的事情，我们只要像下面操作就能方便解决问题：
将图片以块元素方式显示(display:block)；
给图片指定明确的margin-left和margin-top值，而其中margin-left值等于图片所在容器的宽度(imbBoxWidth)减去图片本身宽度(imgWidth)的值的一半
