CSS布局技巧 -- 各种居中

多行垂直居中

废话少说，直接上例子!!!

• display:table

  Html代码：

    <div class="wrapper">
    	<div class="content">
    		<span>我是很短的文本</span>
    		<span>我是很长的文本，内容非常多多多多多多多多多多多多...</span>
    		<div>我只是一个div标签</div>
    		<img src="..." style="width:200px;height:200px;"/>
    	</div>
    </div>
  

  CSS代码：

    .wrapper{display:table;height:800px;width:300px;}
    .content{display:table-cell;vertical-align:middle;text-align:center;}
    //文本内容不足一行时居中，内容多行时左对齐
    .content span{display:inline-block;text-align:left;}
  

  虽然对于现代浏览器都能够生效，但是在奇葩的IE6-7下就无法正常运行。在这里为了兼容这些特殊的情况，必然要使用另外一种相对定位和绝对定位的方式，在使用IE的特有的条件语法的同时，也可以使用ie hack来写。

  兼容IE的CSS代码：

    .wrapper{display:table;height:800px;width:300px;position:relative;}
    .content{display:table-cell;vertical-align:middle;text-align:center;*position:absolute;*top:50%;*left:50%;}
    //文本内容不足一行时居中，内容多行时左对齐
    .content span{display:inline-block;text-align:left;}
    .content *{position:relative;*top:-50%;*left:-50%;}
  

  优点：

  wrapper的高度没有限制，可以自适应，根据内部元素动态的改变高度

  缺点：

  结构复杂，需要增加额外的标签，对于IE6-7浏览器需要额外的兼容

  以上结构能满足所有的多行内容的垂直水平居中，对于单行垂直水平居中的情况，实现相对更加简单，即通过line-height来实现。

  ---

• float属性

  在child元素之前插入一个div元素，使其left浮动，高度为parent元素的50%，同时设置margin-bottom为负的child元素高度的一半，然后再child元素中清除浮动。这样，child元素就相对parent元素垂直居中。

  No Code No Truth

  Html代码：

    <div class="wrapper">
    	<div class="floater"></div>
    	<div class="content">Contents</div>
    </div>
  

  CSS代码：

    .floater{float:left;height:50%;margin-bottom:-100px;}
    .content{clear:both;height:240px;position:relative;}
  

  优点：

  不存在兼容问题，所有浏览器都适应；内部元素的高度需要固定

  缺点：

  需要插入额外的空元素

  ---