怎样使图片在div中垂直居中【兼容IE6和火狐浏览器】

本文转载自:IT技术精粹 http://www.jishubu.com

一下是网页代码,把以下全部代码粘贴到DW的代码模式,去不覆盖即可!

方法一(CSS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片在div中垂直居中</title>

<style type="text/css">

body { margin:0; padding:0; text-align:center;}

* { margin:0; padding:0; }

/* .img_vm{ margin:100px; padding:10px; 500px; height:500px; vertical-align:middle; border:1px dashed red; background:url(images/exampleimg/example_02.jpg) no-repeat center;} */  /* 背景图片垂直居中 */

.img_vm { margin:100px auto; padding:0; 600px; height:500px; border:1px dashed red; text-align:center; vertical-align:middle; position:relative; line-height:500px; font-size:0;}

.img_vm P{+position:absolute;top:50%; }

.img_vm P img { +position:relative;top:-50%; left:-50%;  vertical-align:middle;}

.img_vm p:after {content:".";font-size:1px;visibility:hidden;} /* 此样式专对火狄浏览器还设 */

</style>

</head>

<body>

  <div class="img_vm"><p><img src="img/pic01.jpg" /></p></div>

</body>

</html>

方法二(JavaScript)

<div style=" text-align:center;border:solid #006633 1px; 200px; height:200px; padding:0; font-size:0; line-height:0;">

 <img src="http://bbs.51js.com/images/default/logo.gif" onload="this.style.marginTop=((this.parentElement.offsetHeight-this.offsetHeight)/2);" style="margin-top:0px;" />

</div>

方法三(CSS)至今为止最简洁的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Div图片垂直居中的方法</title>

</head>

<style>

.box {

display: table-cell;

vertical-align:middle;

text-align:center;

*display: block;

*font-size: 175px;

*font-family:Arial;

200px;

height:200px;

border: 1px solid #eee; }

.box img {

vertical-align:middle; border:0;}

</style>

<body>

<div class="box">

<a href="http://www.howpm.com" target="_blank"><img src="http://howpm.com/images/dz7/logo.gif" /></a>

</div>

</body>

</html>

原文地址:https://www.cnblogs.com/dmyao/p/2398022.html