在网上看了很多文章，自己也总结了一下，虽说是自己写的，但是还是要列出我参考过的那些文章的地址，感谢你们的分享！
http://blog.gejiawen.com/2015/03/13/css-layout-horizontal-and-vertical-for-elements/
http://www.cnblogs.com/chenmuyue/archive/2013/05/02/3042984.html
http://blog.csdn.net/yanglang1987500/article/details/42420621
水平居中
· 行内元素（文本、图片）
给其父元素设置text-align:center，里面的内容如果是<img>图片也可以起到效果，同时也可以给img设置宽度
<style>
#father{
width: 600px;
height: 600px;
text-align:center;
background: deepskyblue;
}
</style>
</head>
<body>
<div id="father">
<img src="1.jpg">
</div>
· 块元素
块元素比如div，有2种情况，一种可以设置宽高，另外一种是不可以的
（1）可以设置宽高的
方法一：最常用的利用margin: 0 auto;，就不写代码了；
方法二：子级元素postion:absolute;，然后left:50%,再margin-left:取宽度的一半再负数；这个方法同样适合高度上面的垂直居中，而且没有兼容性的问题，ie5都能用！！！
<style>
#father{
width: 600px;
height: 600px;
background: deepskyblue;
position: relative;
}
#son{
background: red;
width: 100px;
height: 100px;
position: absolute;
left: 50%; //先要left取整个宽度一半的值
margin-left: -50px; //取了宽度负数的一半
}
</style>
</head>
<body>
<div id="father">
<div id="son">
</div>
</div>
</body>
方法三：利用postion:absolute;，然后left:0,再right:0，最后margin:auto；这个方法同样适合高度上面的垂直居中，再加上top:0;bottom:0即可，但是有兼容问题，ie6和ie7不兼容！！！
#son{
background: red;
width: 100px;
height: 100px;
position: absolute;
left: 0;
right: 0; //如果是水平居中，那就左右都设置为0
margin: auto; //相当于四个方向都是margin:auto
}
方法四：利用css3的transform:translate(-50%,-50%)，translate(-50%,-50%) 比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。这个方法同样适用于图片，也适用于垂直居中！！！还有，这个方法同样适用于宽高不设置的情况，然而，因为是css3，ie8和以下都不支持！！！
#son{
background: red;
width: 100px;
height: 100px;
position: absolute;
transform: translate(-50%,-50%); //注意这里的写法
left: 50%;
top: 50%;
}
（2）宽高不固定的情况
方法一：用到table标签进行包装，这个办法就不贴代码了，因为会产生很多冗余代码一般不会这种用。
方法二：把块元素设置display:inline-block；再父级元素text-align:center即可，代码也不贴了，和内联元素一样，缺点在于会改变块元素本身的属性，都不能设置宽高了。
方法三：父级元素设置padding只要左右方向是设置成一样，子级的块元素就能居中，因为子级是块元素，默认占满整行，而父级元素有了左右相等的padding后，两边留的空间就是一样的，自然就水平居中了。
<style>
#father {
padding:10px 150px; //这个父级的padding左右都是留了150px，它的块元素子级撑满整行时自然就两边对齐了
border:1px solid #333;
width: 500px;
height: 500px;
}
#son { //子级不用设置宽，就能居中
background-color:#ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="father">
<div id="son">我要居中</div>
</div>
</body>
垂直居中
· 行内元素
单行文本
把父级line-height设置成和heigh一样
<style>
#father{
width: 600px;
height: 600px;
line-height: 600px; //把line-height设置成和height一样
background: deepskyblue;
}
</style>
</head>
<body>
<div id="father">
我要居中
</div>
· 块元素
方法一：多行文本，块元素以及图片
父级元素设置display: table-cell以及vertical-align: middle; 其中id为son的div改成一张图片，也能实现效果
缺点：只兼容ie8以上浏览器
<style>
#father{
width: 400px;
height: 400px;
text-align:center;
background: deepskyblue;
display: table-cell; /*IE8以上及Chrome、Firefox*/
vertical-align: middle; /*IE8以上及Chrome、Firefox*/
}
</style>
</head>
<body>
<div id="father">
<div id="son">
我要垂直居中<br>
我要垂直居中<br>
</div>
</div>
</body>
方法二：图片外面没有包div的垂直居中
仍然用到父级元素line-height设置成和height一样，但是要将img设置vertical-align: middle;
要注意这个方法对div块元素无效，即使设置了宽高也不行。
缺点：ie6不支持，但是ie7支持
<style>
#father{
width: 400px;
height: 400px;
line-height: 400px;
background: deepskyblue;
}
img{
vertical-align: middle; //将img设置vertical-align: middle;
}
</style>
</head>
<body>
<div id="father">
<img src="1.jpg" />
</div>
</body>
方法三：利用display:table-cell以及vertical-align:center
把子级id为son的div改成图片也是可以实现
缺点：ie6,7不支持，而且还改变了元素本身的display属性
<style>
#father{
width: 400px;
height: 400px;
background: deepskyblue;
display: table-cell;
vertical-align: middle; //将img设置vertical-align: middle;
}
#son{
background: red;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
我要垂直居中<br>
我要垂直居中<br>
</div>
</div>
</body>
总结
列一下比较好用的方法吧：
1）父级postion:relative，子级postion:absolute之后，宽高50%，然后设置margin为元素宽高一半的负值；这个方法没有兼容性问题！缺点在于需要定div的宽高！
2）父级postion:relative，子级postion:absolute之后，上下左右全部为0，margin:auto；缺点也是一定需要定div的宽高，而且ie6,7不兼容！！
3）父级postion:relative，子级postion:absolute之后，top和left为50%，子级加入transform: translate(-50%,-50%); 这个方法在div不设置宽高时也能使用，但是缺点在于transform是css3的样式，ie8以及以下就不兼容了
4) 还是写一段js为了做一个元素可以随着窗口的大小的改变一直处于window中央吧，让js去计算元素的长宽。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById(‘son‘);
toCenter();
window.onresize = function(){ //onresize是window的事件
toCenter();
};
function toCenter(){ //可视区-元素宽度再除以2就是元素的left值
oDiv.style.left = (document.documentElement.clientWidth - oDiv.offsetWidth)/2 + ‘px‘;
oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + ‘px‘;
}
};
</script>