关于这类居中的问题，貌似各种考的会很多，然后生产实践中也确实会遇到很多，网上随便一搜也能找到很多狠多的例子，这里就简单整理一下自己到现在用过的一些方法，都算是比较简单的然后兼容问题较好的，能大部分解决遇到的问题，但是对于一些极端变态的情况，这里的貌似有些力不从心。

##一、水平居中##

###1. 文字居中###
对于一些文字向让他在一个块内居中，最简单的方法就是可以对父元素进行设置

.center{text-align:center;}
<div class="center">
    一些居中的内容
</div>

###2. 定宽的块居中(父元素宽度未知)###
适用于一个有着定宽的块，让他居中，这个情况还是很常见的，比如在切图的时候，要中间设置一个width:960px的块，让他始终都居中，无论浏览器的宽度被拉到多大

.center{margin:0 auto;width:960px;background-color:red;}
<div class="center">
    始终居中的块
</div>

###3. 定宽的块(父元素的宽度已知)###
对于这种情况可以简单粗暴的方法来解决，大致的思路就是既然都知道了让这个块居中时，它的左偏移的距离了，那么用定位（或者内边距）来解决，

.demo3{width: 400px;}
.demo3 .child{width: 100px;margin-left: 150px;}
<div class="demo3 red">
    <div class="child blue">I'm child Block</div>
</div>

或者是下面的方法

.child1{position: relative;left: 50%;margin-left: -50px;width: 100px;}
<div class="demo3 red">
    <div class="child1 blue">I'm child Block</div>
</div>

不过这样应用的场景不会很多，毕竟也太如意了

###4. table的方法###

关于table的方法，大家在试用表格的时候也看到了，在表格里面的元素可以很简单的居中，所以在display的属性里面也有设置父元素display:table，然后再设置子元素为display:table-cell，不过这种方式考虑到这个兼容性的问题，自己平时没用到，例子就省去了

下面贴上几个水平的例子效果

##二、垂直居中##

###1. line-height只有一行文字###
对于有些块，需求需要让他垂直居中，然后比较特殊的是他里面的内容只会在一行里出现，最常见的就是要放置一个按钮的时候了，要让里面的内容简单的居中，针对这类问题最简单的就是设置line-height==父元素的高度

.demo1{width: 150px;font-size: 20px;height: 50px;line-height: 50px;text-align: center;}
<div class="demo1 red">
    button
</div>

这里的原理涉及到行框的形成

###2. vertain-align＋line-height###
这个方法是直接摘录自博客了，里面有两点需要注意

1. 父元素font-size需要设置为0，这个跟vertain-align:middle的定义有关，可以具体看参考博文１;
2. 还有一点比较重要的是要对子元素的line-height进行重置，因为line-height会有继承的效果，所以如果不重置，大家可以看看效果

.outer { line-height: 100px; height: 100px; font-size: 0; }
.inner { display:inline-block; vertical-align:middle; font-size: 16px;height: 50px;width: 100%;line-height: normal;  }
<div class="outer red">
    <div class="inner blue">child</div>
</div>

###3. 类似水平居中的3(父元素的高度已知)###
同上面的３一样只过不过这回修改的top　还有height的属性而已

###4. 绝对定位外边距为auto可以得到垂直居中###
这个方法是在《css权威指南》的时候看到的，大体的思路就是让一个绝对定位的元素eft: 0; top: 0; right: 0; bottom: 0;

.demo3{position: relative;height: 200px;width: 400px;}
.demo3 .child{position: absolute;margin: auto 0;width: 200px;height: 100px;absolute; left: 0; top: 0; right: 0; bottom: 0;}
<div class="demo3 red">
    <div class="child blue">test</div>
</div>

其实还有很多的方法，比如css３上面就有很多，不过自己平时也没怎么使用，所以也就不加了
附上代码gist

参考博文
整理：子容器垂直居中于父容器的方案　整理的超级不错
CSS实现垂直居中的5种方法