css图片垂直居中

最新推荐文章于 2025-12-18 17:13:23 发布

原创最新推荐文章于 2025-12-18 17:13:23 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #class #border #html #div

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种简单实用的方法来实现图片在CSS容器内的垂直居中显示。通过使用特定的HTML结构配合CSS样式，可以轻松地使图片无论在何种分辨率下都能保持居中状态。

css图片垂直居中，比较简单的实现方法：

html:

<div class="testBox">
<span class="hook"></span>
<img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" alt="图片垂直居中" />
</div>

style:

.testBox{border:1px solid #ccc;width:500px;height:400px;text-align:center;}
.testBox .hook{display:inline-block;width:0;height:100%;overflow:hidden;margin-left:-1px;font-size:0;line-height:0;vertical-align:middle;}
.testBox img{vertical-align:middle;border:0 none;}