css元素居中方法

 <div id="out">
   <div class="inner"></div>
 </div>
<style>
	#out {
	  position: relative;
	  width: 100%;
	  height: 400px;
	  background: #ccc;
	}
	
	.inner {
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  background-color: #000;
	  width: 200px;
	  height: 200px;
	}
</style>

效果如下

2、定位居中（2）
与第一种方法类似 父元素相对定位 relative,子元素绝对定位absolute。设置子元素上下左右均为0,margin:0

 <div id="out">
   <div class="inner"></div>
 </div>
<style>
	#out {
	  position: relative;
	  width: 100%;
	  height: 400px;
	  background: #ccc;
	}
	
	.inner {
	  position: absolute;
	  left: 0;
	  top: 0;
	  right:0;
	  bottom:0;
	  margin:auto;
	  background-color: #a00;
	  width: 200px;
	  height: 200px;
	}
</style>

效果如下

3、flex布局
flex布局是一种很新潮的布局方法，利用flex布局使元素垂直水平居中,简单轻便，但是有兼容性问题（ie10之前不兼容）

 <div id="out">
   <div class="inner"></div>
 </div>
<style>
#out {
  display: flex;
  justify-content: center;
  align-items: center;
  background:#ccc;
  width:100%;
  height:400px;
}

.inner {
  width: 200px;
  height: 200px;
  background:#fff;
}
</style>