作为前端的设计者，对产品展示页面的设计不是很了解。 其中，产品图像布局是必然经历的一步，以水平中央和垂直中央最多。 虽然可能需要在水平方向上居中显示产品图像，但在CSS上实现这种展示也很困难。 我想很多前端的程序员都研究过或者搜索过这些方法。 许多站点使用table实现产品图像的垂直居中。 虽然实现起来也相当方便，但唯一的缺点是结构复杂。 现在，让我们来看看几种方法，而不是如何使用talbe方法实现产品图像的水平居中。
图像水平中心存在的问题
水平居中图像是指将图像定位在容器元素中。 容器是大于图像大小或指定了大小的容器。 此外，图像位于此容器的中间。 中央是指元素容器的中间。 图像显示为元素，而不是背景图像(background-image )。 如下图所示。
众所周知，如果img有明确的大小，并且图像大小都匹配，则实现水平、垂直、居中对齐非常简单。 我们只需按以下方式操作就能轻松解决问题。
将图像显示为块元素(display:block；
为图像指定明确的边距左值和边距顶值。 其中“边距-左”的值与“边距-左=”imbBoxWidth的一半相同，是图像所在容器的“宽度”(imbboxwidth )减去图像本身的宽度(imgWidth ) 只需将相应的宽度值替换为高度值，即【margin-top=(imgboxheight-imgheight )/2】。
上面的方法方便简单，但限制太大了。 例如，图像不同时，很难用上面的方法实现。 您可能会说您为照片大小的图像定义了类，并指定了不同的边距。 但是，在很多情况下，我们不能用这种方法解决图像水平居中的问题。 例如，如果有许多不同大小的图像，并且图像容器的单位和图像大小的单位不匹配，则无法计算图像和容器之间的边距是多少。 在这种情况下，解决图像的水平居中是相当困难的。 反过来说，如果有一种将不同大小的图像水平、垂直、居中的方法，那对我们将是多么有用和多么方便。
解决问题——将图像定位在水平和垂直中心
解决水平居中对齐相当简单。 如果图像是浮动的，并且“display:inline”，我们可以通过为图像设置“文本对齐3360中心”属性来平滑地解决水平居中对齐问题。
关于以垂直方向为中心的最佳解决方案，现代浏览器在图像容器中显示“dipslay:table-cell； 垂直对齐： middle”，该方法可以使图像平滑地垂直居中，但只能在现代浏览器中工作，在IE6-7中无法正常工作。 这样做不能实现吗？ 请不要着急。 一起看看下面的几种方法吧。
1、在table-cell中加入display :在线
这个方法很棒。 他说，首先使用display-table和vertical-middle是现代浏览器实现图像垂直居中的最佳方法。 但是，IE6-7不支持display:table-cell。 其实没那么严重。 我们在IE6-7下给他另一种写法。 其实掌握原理在IE下实现也不难。 让我们先来看看这个观点：
首先，在图像的容器要素中输入“display:table-cell； 垂直对准：米； ”实现当前浏览器的垂直居中
在IE6-7中，创建与照片容器高度相同高度的线盒，在该线盒中也设置“垂直对齐： middle”是一种较好的方法。
下一个重要的是为IE6-7编写代码框。 IE6-7的底部显示支持“dipslay:inline-block”。 这样，在图像的容器中创建空元素(例如span )，并在span的“display :在线块”中创建空元素； height:100%； 垂直对准：米”。
创建线盒时必须小心。 在IE6-7中，中空的line-block元素的宽度为“0”。 这在IE6-7中无效。 在这种情况下，必须将span标记为“width:1px”。 在这种情况下，水平中心会产生1px的误差，但此错误可以接受。
最终的解决方案是使用带有display:table-cell和display :在线块的在线span。 当然，你需要为IE写特殊的代码。 接下来，我们来看看代码：
html标记
XML/html代码将内容复制到剪贴板
CSS代码
CSS代码将内容复制到剪贴板
. imgWrapli{
浮点：左；
border:solid1px#666；
margin:10px10px00；
列表样式： none；
border-collapse:collapse；
}
. imgWrap
a {background:#ffaurl(images/gridBg.gif)repeatcenter;
width:219px;
height:219px;
display:table-cell;/*图片容器以表格的单元格形式显示*/
text-align:center;/* 实现水平居中 */
vertical-align:middle;/*实现垂直居中*/
}
.imgWrap a:hover {
background-color:#dfd;
}
.imgWrap img {
border:solid1px#66f;
vertical-align:middle;/*图片垂直居中*/
}
效果
2、空白标签实现图片的垂直居中
这种方法很有意思，也很有独特之处，兼容各浏览器，代码较第一种方法又简单很多，最主要的不要单独给IE写效果，而且易懂，下面一起看看这种方法吧。
HTML Markup
XML/HTML Code复制内容到剪贴板
CSS Code
CSS Code复制内容到剪贴板
.imgWrap li{
width:219px;
height:219px;
float:left;
border:solid1px#666;
margin:10px10px0 0;
list-style:none;
text-align:center;
font-size: 0;
}
.imgWrap a {
display:block;
height: 100%;
background:#ffaurl(images/gridBg.gif)repeatcenter;
}
.imgWrap a:hover {
background-color:green;
}
.imgWrap span {
display:inline-block;/*将行内元素改变为行内块元素显示*/
width:1px;/*实现ＩＥ下可读效果*/
height: 100%;/*使用元素高度和图片容器高度一样*/
vertical-align:middle;/*垂直对齐*/
}
.imgWrap img {
vertical-align:middle;
}
效果
3、display:table模拟表格实现图片垂直居中
接下来要说的这种方法是结构有点复杂，而且在IE6-7事要配合hack来产现。这个方法就是模拟表格的形式来实现图片垂直居中的效果。
表格大家都知道，他有行(table-row)单元格(table-cell)，众所周知，表格单元格中“vertical-align: middle”能让元素垂直居中，那么下面这个实例就是利用这种原理来制作的，一起来看代码
HTML Markup
XML/HTML Code复制内容到剪贴板