CSS设计常见问题收集（二）

1. 如何水平居中？
   html, body { margin: 0; text-align: center; }
#container { position: relative; margin: 0 auto; width: 760px; text-align: left; }
2. 如何垂直居中文本？
   div { height:30px; line-height:30px; border:1px solid red }只要给容器设置一个与其高度相同的行高就可以了。
3. 怎样使一个层垂直居中于浏览器中？
   div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二。
4. 图片垂直于容器内
   * {margin:0;padding:0}
   div {
   width:500px;
   height:500px;
   border:1px solid #ccc;
   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%;
   width:276px;
   height:110px
   }

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

5. 保持容器的最小高度：
   div.box1,div.box2{
width: 300px;
min-height: 150px;
float: left;
}
* html div.box1,* html div.box2{height: 150px;}
6. 未知高度的非表格垂直对齐：
   #div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}
   效果: