CSS布局技巧 -- 各种居中

多行垂直居中

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

• display:table

  Html代码：

  
  

  
  我是很短的文本
  我是很长的文本，内容非常多多多多多多多多多多多多...
  

  我只是一个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代码：

  
  

  
  

  Contents

  
  

  CSS代码：

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

  优点：

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

  缺点：

  需要插入额外的空元素

  ---