寬高只是為了方便看效果，可以看下我的這篇文章居中一個div的n中方法

div {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink;
}

1. flex布局：
父元素設置
.parent{

display: flex;
justify-content: center;
align-items: center;

}
2. transform:transition(-50%,-50%)
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
//或寫為（需提前知道元素寬高）
//margin-left:-50px;
//margin-right:-50px
3. margin:0 auto（水平居中的最簡單方式，需知道元素寬度）
4. display:inline-block
父元素設置
.parent{

text-align: center;

}
子元素設置
.child{

display:inline-block;

}

使用彈性布局，父元素：
display: flex;
justify-content: center;//水平居中
align-items: center;//垂直居中

或者
父元素:
position: relative;
子元素:
left: 50%;
top: 50%;
transform: translate(-50%);

子元素絕對定位，找到父及元素，設置子元素的top left為50% ，transform:translate(-50%);

這是自己整理的水平和垂直居中，在兼容性允許的情況下，選擇一種最適合自己的就行
http://jsbin.com/cogiwid/70/e...