未知大小的img或div如何水平垂直居中显示？

第一种情况：div中有一个img标签，图片大小未知？

方法一：主要利用绝对定位和相对定位实现。

父div相对定位。子标签img绝对定位，并且设置top：0；bottom：0；left：0；right：0；和margin：auto，缺一不可。具体代码如下：

html如下：

	<div class="box">
   		 <img src="" alt="">
	</div>

css如下：

	.box{
   		 position: relative;
   		 width:400px;height:400px;
	}
	.box > img{
   		 top:0px;
   		 bottom:0px;
   		 left:0px;
   		 right:0;
   		 margin:auto;
   		 position: absolute;
	}

方法二：主要是利用display：table-cell。

给父级div同时设置3个属性即可，display：table-cell；text-align:center;vertical-align:middle;

html如下：

	<div class="box">
    		<img src="" alt="">
	</div>

css如下：

	.box{
    		width:400px;height:400px;
    		display: table-cell;
    		text-align: center;
    		vertical-align: middle;
	}

第二种情况：未知大小的div在body中水平垂直居中显示？

主要使用绝对定位和 display:table-cell 和 margin:auto; 属性。具体做法：给要居中显示的div添加下面的css即可：

{

	position: absolute;
	top:50%;
	bottom:50%;
	left:50%;
	right:50%;
	display: table-cell;
	margin:auto;

	}