css垂直居中

一、div的高度已知---line-hight

 　　<div>
　　　　 <span><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Logo" />固定高寬,圖片垂直局中</span> 　　</div> 

 　　<style>

　　.vertical {
  	width:500px;
 	height:220px;
	line-height:220px;
	border: 1px solid;
	text-align: center;
　　}
　　.vertical img {
	vertical-align: middle;
　　}
　　</style>
　　<!--[if IE 6]> 　　<style>  　　 .vertical span {   height: 100%; /* 要保證和父元素高度同樣才行 */ writing-mode: tb-rl; vertical-align: middle;  　　} 　　</style> 　　<![endif]-->　　　　　　 

只要給容器設置 line-height 和 height，並使兩值相等，再加上 over-flow: hidden

1.同時支持塊級和內聯極元素

2.支持全部瀏覽器

3.IE中不支持img等居中

二、定位方法垂直居中顯示圖片--height已知

　　<style>
　　.vertical{
	width:300px;
	height:200px;
	display:table;
	text-align:center;
	border:solid 1px red;
　　}
　　.vertical span{
	display:table-cell;
	vertical-align:middle;
	border:solid 1px blue;
　　}
　　.vertical span img{
	border:dashed 1px green;
　　}
　　</style>
　　<!--[if lte IE 7]> 　　<style> 　　.vertical{ position:relative; overflow:hidden; 　　} 　　.vertical span{ position:absolute; left:50%; top:50%; 　　} 　　.vertical span img{ position:relative; left:-50%; top:-50%; 　　} 　　</style> 　　<![endif]--> 

　　 <div>
　　　　  <span><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Logo" /></span> 　　</div> 

　　vertical-align適用於：內聯及 table-cell 元素；text-align適用於塊元素

三、未知高度垂直居中--resiez

　　<style type="text/css"> 　　.demo{ resize:both; overflow:hidden; width:100px; height:100px; background:#aaa; display:inline-block; font-size:0;  　　} 　　.demo p{ display:inline-block; vertical-align:middle; font-size:16px; 　　} 　　.demo::after{ display:inline-block; height:100%; width:0; content:'\0020'; vertical-align:middle; 　　}     </style> 

 　　<div>

	<p>ddd</p>
　　</div>

　　IE6-8b不支持

四、利用button實現垂直居中

   /*單行文本對齊：button*/
    .demo{
      width:600px;
      height:100px;
      background:#fcc;
      border: 1px solid #596480;
    }
    button{
      margin:0;
      padding:0;
    }
    .demo button{
      width:0;
      height:100px;
      vertical-align:middle;
      overflow:hidden;
    }
    .demo span{
      /*這個不能省*/
      vertical-align:middle;
    }

　　<h2>單行文本垂直居中：button</h2> 
　　<div class="demo">  　　 <button>test</button>  　　 <span>單行文本垂直對齊：button，不能居中對齊</span> 　　</div> 

　　　此方法不能夠實現文本居中對齊

五、多行文本對齊：定位+百分比

　　<h2>多行文本垂直居中：定位+百分比</h2>
　　<div class="mul-text">    　　 <div class="outter">       　　 <span class="inner">             多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中             多行文本垂直居中多行文本垂直居中 　　      </span>   　　</div> 　　</div> /*多行文本居中：1*/     .mul-text{         display: table-cell;         width:600px;         height: 100px;         vertical-align: middle;         text-align:center;         border: 1px solid #596480;         background: #ffc;         /*兼容ie6,7*/         *position: relative;       }     .outter{         /*該div相對父div（class=mul-text）垂直對齊，使用的是絕對定位*/         *position: absolute;         *top: 50%;         *left: 0;     }     .inner{         /*相對父div(class=outter)進行相對定位,inner         會相對outter行框進行顯示*/         *position: relative;         /*設置top能夠使得inner相對outter居中*/         *top: -50%;         *left: 0;             } 

六、多行文本垂直居中：after

  　　<h2>多行文本垂直居中：after</h2>
  　　<div class="mul-text-2">               　　<span class="inner-2"> 　　       多行文本顯示多行文本顯示多行文本顯示多行文本顯多行示多行文本顯示多行文本    　　 </span> 　　    <span></span>            　　 </div> /*多行文本對齊：after*/     .mul-text-2{         width:600px;         height:100px;         background:#aa8;         /*font-size不能少*/         font-size:0;         overflow:hidden;         text-align:center;     }     .inner-2,.after,.mul-text-2:after{         display:inline-block;         vertical-align:middle;     }     .inner-2{         font-size:18px;     }     .after,.mul-text-2:after{         /*清除浮動*/         content:"\0200";         overflow:hidden;         width:0;         height:100px;         visibility:hidden;     } 

七、背景圖片居中

 　　<h2>圖片垂直居中：行高</h2>    
　　 <div class="img-text">     　　 <span>sssssss1</span>     　　 <div class='img-div'><i></i></div> 　　 </div>   /*背景圖片*/     .img-text{         width:600px;         height:100px;         border:#f63;         border: 1px solid #596480;            vertical-align:middle;          text-align:center;          font-size:0;       }           .img-text span{         font-size:15px;         display:inline-block;         height:100px;         line-height:100px;     }     .img-div{         width:134px;         height:44px;                 display:inline-block;          vertical-align:middle;            }     .logo{         display:inline-block;         background:url(./img/logo.png);         width:134px;         height:44px;        }