html图片在div页面水平垂直居中显示,CSS解决页面图片水平垂直居中问题的方法...

做为一个前端设计人员，对于产品展示页面的设计一定不会陌生，其中产品图片摆放是必定经历的一步，并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中，实现也是相当的方便，唯一不足之处就是结构繁锁，那么今天和大家一起看几种不是使用talbe方法实现产品图片水平垂直居中的方法。

图片水平垂直居中存在的问题

所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器)，并且图片位居此容器正中间(中间是指元素容器的正中间)，而图片不是以背景图片(background-image)形式展示，是以元素形式展示的。如下图所示：

大家都知道，如果其中img有明确的尺寸，并且图片尺寸都是一致的，要实现其水平垂直居中一件非常容易的事情，我们只要像下面操作就能方便解决问题：

将图片以块元素方式显示(display:block)；

给图片指定明确的margin-left和margin-top值，而其中margin-left值等于图片所在容器的宽度(imbBoxWidth)减去图片本身宽度(imgWidth)的值的一半【margin-left=(imgBoxWidth-imgWidth)/2】;margin-top值和margin-left很类