<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 

} 

div { 

 width:500px; 

 height:500px; 

 line-height:500px; 

 border:1px solid #666; 

 overflow:hidden; 

 position:relative; 

 text-align:center; 

} 

div p { 

 position:static; 

 +position:absolute; 

 top:50% 

} 

img { 

 position:static; 

 +position:relative; 

 top:-50%;left:-50%; 

 vertical-align:middle 

} 

p:after { 

 content:".";font-size:1px; 

 visibility:hidden 

} 

--> 

</style> 

</head> 

<body> 

<div><p><img src="http:///intl/en/images/logo.gif" /></p></div> 

</body> 

</html> 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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"> 

<!-- 

* {margin:0;padding:0;} 

div { 

 width:500px;border:1px solid #666; 

 height:500px; 

 background:url("http:///intl/en/images/logo.gif") center no-repeat 

} 

--> 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> 


<!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 runat="server"> 

 <title>未命名頁面</title> 


 <script type="text/javascript"> 

 function setCenter(Xelement) 

 { 

 var parent=Xelement.parentNode; 

 parent.style.position="relative"; 

 Xelement.style.position="absolute"; 

 var left=(parent.clientWidth-Xelement.clientWidth)/2; 

 var top=(parent.clientHeight-Xelement.clientHeight)/2; 

 Xelement.style.left=left+"px"; 

 Xelement.style.top=top+"px"; 

 } 

 </script> 


</head> 

<body> 

 <form id="form1" runat="server"> 

 <div id="picbox" style="width: 200px; height: 200px; background: #ccc;"> 

 <img id="img1" src="images/c7.jpg" alt="" οnlοad="setCenter(this)" /> 

 </div> 

 </form> 

</body> 

</html>