转自：http://www.nowamagic.net/librarys/veda/detail/1950
在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。
方法一
将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
<style type="text/css">
body {
height:100%;
}
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">?
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->
</head>
<body>
<div id="box">
<span><img src="images/demo_zl.png" alt="" /></span>
</div>
</body>
</html>
方法二
标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法2 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
<style type="text/css">
body {
height:100%;
}
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">?
#box i {
display:inline-block;
height:100%;
vertical-align:middle
}
#box img {
vertical-align:middle
}
</style>
<![endif]-->
</head>
<body>
<div id="box">
<i></i><img src="images/demo_zl.png" alt="" />
</div>
</body>
</html>
方法三
在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现居中，另外，对于IE6/IE7使用了CSS表达式来实现兼容。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
<style type="text/css">
body {
height:100%;
}
#box{
width:500px;height:400px;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box p{
width:500px;height:400px;
line-height:400px; /* 行高等于高度 */
}
/* 兼容标准浏览器 */
#box p:before{
content:"."; /* 具体的值与垂直居中无关，尽可能的节省字符 */
margin-left:-5px; font-size:10px; /* 修复居中的小BUG */
visibility:hidden; /*设置成隐藏元素*/
}
#box p img{
*margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="box">
<p><img src="images/demo_zl.png" alt="" /></p>
</div>
</body>
</html>
相关推荐
在网页设计中，让图片垂直居中是一项常见的需求，它能...通过阅读提供的文本文件"图片垂直居中2.txt、图片垂直居中3.txt、图片垂直居中1.txt、图片垂直居中4.txt"，你可以找到更多示例和解释，深入了解每种方法的细节。
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
要使图片垂直居中，可以创建一个包含图片的容器，并设置以下样式： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2. **CSS Grid**...
在这个"4个简单图片垂直居中"的案例中，我们将探讨几种主流的CSS策略来解决这个问题。 1. **Flexbox布局**： Flexbox是CSS3引入的一种新的布局模式，特别适合处理容器内元素的对齐问题。通过设置`display: flex`，...
对于固定高度的容器，可以使用绝对定位实现图片垂直居中。设置容器的`position: relative;`，图片的`position: absolute;`，`top: 50%;`，再通过负的`transform`值让图片上移自身高度的一半，达到居中效果： ```...
在网页设计中，让图片水平垂直居中是一个常见的需求，特别是在构建响应式布局或需要保持元素在不同屏幕尺寸下居中的场景。本文将详细介绍如何使用简洁的代码来实现这一目标，适用于各种现代浏览器。 首先，我们可以...
本文将深入探讨“图片垂直居中样式”的实现方法，通过分析给定的代码片段，详细解释其中涉及的关键CSS技术点，以及如何在实际项目中应用这些技巧。 ### 核心知识点解析 #### 1. 相对定位与绝对定位的结合使用 在...
本CSS教程提供了两种对齐方式即垂直居中对齐和...CSS使图片垂直居中的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...
"div+css图片垂直居中"是这个话题的核心，它涉及到CSS布局和浏览器兼容性问题，特别是对于Internet Explorer（IE）和其他现代浏览器的处理差异。下面将详细阐述如何实现这一目标。 1. **基本原理**： CSS中的定位...
在提供的"div的内容图片垂直居中代码（兼容多浏览器）.rar"压缩包中，可能包含多种实现方式的示例代码，供开发者参考和学习。通过这些代码，你可以了解到如何在不同的浏览器环境下实现图片或内容的垂直居中，从而...
总结来说，"jQuery图片尺寸调整插件图片垂直居中自适应容器"是一个强大且实用的工具，它结合了jQuery的便利性和CSS布局的灵活性，为开发者提供了方便快捷地处理网页中图片展示问题的解决方案。通过深入理解这个插件...
任意图片在div里的垂直居中！
css图片垂直居中代码，超级简单，css只有二行，其中css最核心的地方用到 position，transform，解决以往代码多，或用table来居中的麻烦。
以上就是本文介绍的四种使用JavaScript实现图片垂直居中的方法。每种方法都有其特点和适用场景。绝对定位适合于已知尺寸的容器和内容；display: table方法则需要父容器和子容器都有一定的尺寸；vertical-align属性...
本文主要介绍了一种针对文字和图片垂直居中的方法，适用于静态布局。这个方法基于`display:inline-block`和`vertical-align:middle`属性，结合额外元素技巧来实现。 首先，我们需要理解`display:inline-block`属性...
明锋工作室整理常用资料。本次资料是一个自动居中插件，只要设定div长度和高度，其中的图片会自动铺满容器并且自动居中。很简单好用。并且该自动居中插件支持IE6、IE7、IE8、IE9、IE10、CHROME、FIREFOX、OPERA。
在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的...
用CSS来实现img图片在DIV层中上下左右都居中，并且图片等比例缩放。很实用的
不过，通过一些特殊的CSS技巧，我们可以实现兼容IE6的图片垂直居中效果。 首先，需要理解的是在IE6中实现垂直居中的基本原理。一种常用的方法是使用inline-block布局。这种方法的原理在于将图片及其容器设置为`...