XHTML,CSS
Oct
22
这是一个网友在经典论坛里发的一个“淘宝招聘的CSS题目”。
原题是这样说的：
仔细看了很多网友的回帖，很多种方法能实现这个问题，但是有一个网友的代码最精简并且兼容性也是最好的，果然是高手。
代码如下：
原题是这样说的：
引用
题目：使用纯CSS实现未知尺寸的图片(高宽都小于200px)在200px的正方形容器中同时水平和垂直居中
仔细看了很多网友的回帖，很多种方法能实现这个问题，但是有一个网友的代码最精简并且兼容性也是最好的，果然是高手。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css" media="screen">
div {border:1px solid #000;
width:300px;
height:300px;
text-align:center;
position:relative;
display:table-cell;
vertical-align:middle;}
p {+position:absolute;
top:50%;}
img {+position:relative;
top:-50%;
left:-50%;}
</style>
</head>
<body>
<div>
<p>
<img src="http://bbs.blueidea.com/images/blue/logo.gif">
</p>
</div>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
div {border:1px solid #000;
width:300px;
height:300px;
text-align:center;
position:relative;
display:table-cell;
vertical-align:middle;}
p {+position:absolute;
top:50%;}
img {+position:relative;
top:-50%;
left:-50%;}
</style>
</head>
<body>
<div>
<p>
<img src="http://bbs.blueidea.com/images/blue/logo.gif">
</p>
</div>
</body>
</html>
