Css实现垂直水平居中的六种方法

经常在项目中用到，今天总结了一下：

 

演示地址：http://codepen.io/anon/pen/xGdpOa

 

以下两个类为公共类，便于更好的显示效果，非核心代码

 

	.common{
		width: 600px;height: 180px;
		background-color:#56abe4;
		color: #fff;
		margin: 15px auto; 
		border-radius: 3px;
	   }

	.con{
		display: inline-block;
		padding: 15px;
		width: 160px;
		height: 80px;
		background-color: orange;
	}

 

　　

 

正文部分：

第一种方法：

/*position: absolute;top:0;right: 0;bottom: 0;left: 0;margin: auto;*/

 

 

HTML结构：

 

<div class="common block1">
	<div class="inner1 con">
		position: absolute;
		top:0;right: 0;bottom: 0;left: 0;
		margin: auto;
	</div>
</div>

 

 

CSS部分：

	
	.block1{
		position: relative;
	}


	.inner1{
		position: absolute;
		top:0;right: 0;bottom: 0;left: 0;
		margin: auto;
	}

　

第二种方法：　

/*display: table-cell*/

HTML结构：

 

<div class="common block2">
   	<div class="con">
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	</div>

</div>

 

 

CSS部分：　

.block2{
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}

　　

第三种方法：

 

 

/*display: flex;*/

HTML结构：

 

<div class="common block3">
	<div class="con">
  display: flex;
  align-items: center;
  justify-content: center;
	</div>
</div>

 

 

CSS部分：

	.block3{
		display: flex;
		align-items: center;
		justify-content: center;
	}

　　

　第四种方法：

  /*负定位*/

HTML结构：

<div class="common block4">
	<div class="inner4 con">
	   position: absolute;
		top: 50%;
		left: 50%;
        并利用负定位消除元素的上下，左右偏移
	</div>
</div>

 

CSS部分：

	.block4{
               position: relative;
	}

	.inner4{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -55px;/*80/2+15=55*/
                margin-left: -95px;/*160/2+15=95*/
	}

　　

　第五种方法：

 /*transform*/

HTML结构：

<div class="common block5">
	<div class="inner5 con">
		position: absolute;
		top: 50%;
		left: 50%;
        transform:translate(-50%,-50%);
	</div>
</div>

CSS部分：

	.block5{
                position: relative;
	}

	.inner5{
		position: absolute;
		top: 50%;
		left: 50%;
                transform:translate(-50%,-50%);
                word-wrap: break-word;
	}

　　

第六种方法：（兼容性较好）

/*行内块*/

HTML结构：

<div class="common block6">
	<div class="inner6 con">行内块:<br/>谨记span标签与该div之间是没有空白的，否则会产生误差</div><span></span>
</div>

CSS部分：

	.block6{ text-align:center;}

	.inner6,.block6 span{
	 display:inline-block;
	 *display:inline;
	 zoom:1;    
	 vertical-align:middle;	
	}

	.inner6{max-width:100%;max-height:100%;}

	.block6 span{width:0;height:100%;}

 

以上几种方案存在兼容性问题，在使用时请先查询核心css的浏览器兼容情况，查询地址：http://caniuse.com/

 

以上。

 

欢迎补充~