使用纯CSS实现未知尺寸的图片在容器中同时水平和垂直居中

Oct 22

八戒 , 15:43 , web标准 , 评论(30) , 引用(0) , 阅读(1750) , Via 本站原创

大 | 中 | 小

　　这是一个网友在经典论坛里发的一个“淘宝招聘的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>

相关日志
Web页面展示——漫天漫画培训

Tags: css