CSSASS三人行

未知大小图片在已知容器中居中作者：ONEBOYS 发表时间： 2008年08月21号，星期四阅读：5,273 次

以下是一些从网上收集来的各种适用于”未知尺寸图层的垂直居中”方法

<!DOCTYPE html>
<html>
<head>
<style>
.box {
 border:1px solid #666666;
 font-size:12px;
 width:600px;
 height:200px;
 line-height:200px;
 overflow:hidden;
 text-align:center;
}
* html .box {
 font-size:180px;
}
* > html body .box {
 font-size:180px;
}
* > html body .box img {
 margin:-35px 0pt 0pt;
}
img {
 vertical-align:middle;
}
</style>
</head>
<body>
<div class="box">
  <img src="http://www.baidu.com/img/baidu_logo.gif" style="border:1px solid black;">
</div>
</body>
</html>

（不知margin值，和font-size值如何计算）

[扩展]增加文字同时居中

<!DOCTYPE html>
<html>
<head>
<style>
.box {
border:1px solid #666666;
font-size:12px;
width:400px;
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
}
* html .box {
font-size:180px;
}
* > html body .box {
font-size:180px;
}
* > html body .box img {
margin:-35px 0pt 0pt;
}
img {
vertical-align:middle;
}
.wrap a{
font-size:12px;
vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
  <div class="wrap"><img src="http://www.baidu.com/img/baidu_logo.gif" style="border:1px solid black;"><a href="#">asadasdas</a></div>
</div>
</body>
</html>

（文字的垂直居中方法：line-height设置与height一样高.但只针对单行文字。）

来自Taobao UED的方法（垂直均为近似居中）

<style type="text/css">
.box {
     display: table-cell;
     vertical-align:middle;
     width:200px;
     height:200px;
     text-align:center;
     /* hack for ie */
     *font-size: 175px;
     /* end */
     border: 1px solid #eee;
}
.box img {
     vertical-align:middle;
}
</style>
<div class="box">
     <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

(高度/字体大小的比值为1.14左右时IE可实现垂直居中)

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
 <style type="text/css">
<!--
 * {margin:0;padding:0}
div {
   width:500px;
   height:500px;
   border:1px solid #666;
   overflow:hidden;
   position:relative;
   display:table-cell;
   text-align:center;
   vertical-align:middle
 }
div p {
  position:static;
 +position:absolute;
   top:50%
 }
img {
   position:static;
+position:relative;
  top:-50%;
  left:-50%;
  }
 </style>
</head>
 <body>
       <div>
          <p><img src="http://www.google.com/intl/en/images/logo.gif" /></p>
       </div>
 </body>
 </html>

标签：居中
发布在 CSS2 | 没有评论 »

图层居中，可灵活设定边与窗口的距离作者：ONEBOYS 发表时间： 2008年08月19号，星期二阅读：1,512 次

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
*{margin:0; padding:0;}
html,body{width:100%; height:100%;overflow:hidden;}
body{margin:100px 0 0 100px;position:relative;}
.wrap{height:100%; width:100%; background:#ccc; position:absolute;
 bottom:200px; right:200px;}
.cont{margin:200px 0 0 200px;}
</style>
</head>
<body>
<div class="wrap"><div class="cont">1阿斯顿就恢复2阿斯顿就恢复3阿斯顿就恢复4阿斯顿就恢复5阿斯顿就恢复6阿斯顿就恢复7阿斯顿就恢复8阿斯顿就恢复9阿斯顿就恢复10阿斯顿就恢复11阿斯顿就恢复12阿斯顿就恢复13阿斯顿就恢复14阿斯顿就恢复15阿斯顿就恢复16阿斯顿就恢复</div></div>
</body>
</html>

上面这种方法，应该说很少会被用上。

而下面这个则比较常见，
不过，它是对已确定尺寸的元素的水平与垂直居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<style type="text/css">
body{padding:0;margin:0;background:#f4dcd8;}
#Main{position:absolute;width:500px;height:400px;left:50%;    top:50%;margin:-200px 0 0 -250px;background:#87b6bc;}
</style>
<body>
<div id="Main">
TEST
</div>
</html>

标签：居中
发布在 CSS2 | 没有评论 »

未知大小图片在已知容器中居中 作者：ONEBOYS 发表时间： 2008年08月21号，星期四 阅读：5,273 次

图层居中，可灵活设定边与窗口的距离 作者：ONEBOYS 发表时间： 2008年08月19号，星期二 阅读：1,512 次

未知大小图片在已知容器中居中作者：ONEBOYS 发表时间： 2008年08月21号，星期四阅读：5,273 次

图层居中，可灵活设定边与窗口的距离作者：ONEBOYS 发表时间： 2008年08月19号，星期二阅读：1,512 次