CSS布局技巧 -- 各种居中

时间：2024-07-14 20:32:50

多行垂直居中

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

  • 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;}

    优点：

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

    缺点：

    需要插入额外的空元素

相关文章