CSS图片垂直居中实现方法详解

方法一：借助 HTML 结构展示图片与样式

HTML 结构如下：

```html

```

对应的 CSS 样式为：

```css

body {

margin: 0;

padding: 0;

font: 12px/1.5 tahoma,arial;

}

.box {

width: 220px;

height: 220px;

border: 1px solid F30;

margin: 100px auto 0;

display: table;

}

.pic-wrap {

display: table-cell;

text-align: center;

vertical-align: middle;

}

/ 针对 IE6、7 的特殊样式 /

.box { position: relative; }

.pic-wrap { width: 100%; position: absolute; top: 50%; left: 0; }

.pic-wrap img { position: relative; top: -50%; left: 0; }

```

方法二：同样 HTML 结构，不同的 CSS 样式处理方式

CSS 代码示例：

```css

.box {

width: 220px;

height: 220px;

border: 1px solid F30;

margin: 100px auto 0;

}

.pic-wrap {

display: table-cell;

vertical-align: middle;

width: 220px;

height: 220px;

text-align: center;

/ 针对 IE6、7 不支持 display:table-cell 的处理 / display: block; font-size: 192px; _font-family: sans-serif; / 设置字体，避免 IE6 中的像素偏差 / } .pic-wrap img { border: none; vertical-align: middle; / 处理 IE 中的默认高度问题 / } ``` 注意点：当在 CSS 中为 body 元素设置字体时，方法二在 IE7 下可能会失效。 最佳实践方法：结合上述两种方法的优点，进一步优化 CSS 代码以提高兼容性和显示效果。例如，针对 IE7 中的空文本节点问题，可以添加 `line-height: 220px` 的样式设置。同时保留其他必要的样式调整以确保在各种浏览器中的良好表现。这样，无论在哪种浏览器下，图片都能以最佳的方式呈现在页面中。这样的处理方式不仅增强了用户体验，还展示了对于网页布局和样式处理的理解和精湛技巧。