怎样让元素垂直水平居中

元素垂直水平居中：

• 设置定位 结合translate一起使用

.big{
	400px;
	height:400px;
	border:1px solid #ccc;
	position:relative;
}
.small{
    200px;
    height:200px;
    background-color:red;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

<div class="big">
	<div class="small">
	</div>
</div>

• 设置定位absolute 上下左右都为0 设置margin:auto;

.big{
	400px;
	height:400px;
	border:1px solid #ccc;
	position:relative;
}
.small{
    200px;
    height:200px;
    background-color:red;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

<div class="big">
	<div class="small">
	</div>
</div>

• 例如图片居中：

  第一种：

.big{
		 400px;
		height: 400px;
		text-align: center;
		border:1px solid #ccc;
	}

.big img{
		vertical-align: middle;
	}
.big:after{
		content:'';
		display:inline-block;
		vertical-align: middle;
		height: 100%;
	}
	

<div class="big">
	<img src="mm.jpg" alt="" width="200">
</div>	

​ 第二种： display:table-cell属性指的是让标签元素以表格单元格的形式呈现，类似于td标签，但是ie6/7不支持此属性，在使用此属性的时候，float、position:absolute 尽量不要同时使用。可以设置高宽 padding值，但是margin没有反应。

.big{
		 400px;
		height: 400px;
		border:1px solid #ccc;
		display:table;
	}
.small{
		display:table-cell;
		text-align: center;
		vertical-align:middle;
	}

<div class="big">
		<div class="small">
			<img src="mm.jpg" width="200px"alt="">
		</div>
</div>

​ 第三种：类似第一种

.big{
		 400px;
		height: 400px;
		border:1px solid #ccc;
		text-align: center;
	}

img{
		vertical-align: middle;

	}
span{
		height: 100%;
		display:inline-block;
		vertical-align: middle;
	}

<div class="big">
		<img src="mm.jpg" width="200px" alt="">
		<span></span>
	</div>