水平居中，如果知道元素的宽度，则可以使用：
.cell{width:300px; margin:0 auto; text-align:center;}
如果是内联元素居中，那么直接用text-align:center则行。
如果未知元素宽度，并且非内联元素，下面给出的几种方案也适合你。
用css来实现元素的垂直居中效果是件苦差事，虽然说实现方法有多种，但有很多方式在某些浏览器下可能无法正常的工作。
这些不同方法实现垂直居中的各自优点和其不足之处。
方法一：
单行垂直居中，只要保证元素内容是单行，并且其高度是固定不变的，只要将其“line-height”设置成和“height”值一样就可以。
不过这种方法局限性太大，只有单行文本的元素才适用，所以在多行元素中是不能使用这种方法的。
html：
复制代码 代码示例:
<div class="vertical">content</div>
css代码：
复制代码 代码示例:
.vertical {
height: 100px;
line-height: 100px;/*值等于元素高度的值*/
}
优点：
适合在所有浏览器，没有足够空间时，内容不会被切掉
缺点：
仅适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。
这种方法对运用在小元素上是非常有用的，比如说让一个button、图片或者单行文本字段
第一种：相对定位法
原理是父类浮动的同时向左left:50%,而子类则向左浮动的同时left:50%;
复制代码 代码示例:
<style type="text/css">
.centerlist {position:relative;left:50%;float:left;}
.centerlist li {position:relative;right:50%; z-index:2;float:left}
</style>
<ul class="centerlist">
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
</ul>
第二种：强制内联
复制代码 代码示例:
<style type="text/css">
.centerlist_inline{text-align: center;}
.centerlist_inline li{display: inline;}
</style>
<ul class="centerlist_inline">
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
</ul>
局限：块级元素改为内联元素，那么高度、宽度、margin-top,margin-bottom, padding-top,padding-bottom,等都不能用。
第三种：
使用inline-block
inline-block替换float可能就会清楚这个属性的好处
复制代码 代码示例:
<style type="text/css">
.centerlist_inline-block{text-align: center; font-size:0; -letter-spacing:-1px;}
.centerlist_inline-block li{display: inline-block; *display: inline; *zoom:1; font-size:12px; letter-spacing:normal; word-spacing:normal;}
</style>
<ul>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
</ul>
第四种：
复制代码 代码示例:
<style type="text/css">
.centerlist_table-cell{display:table; margin:0 auto;}
.centerlist_table-cell{display:table-cell;}
</style>
<ul class="centerlist_table-cell">
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
</ul>
缺点是不兼容ie6，ie7
推荐使用inline-block这种水平居中的方法，既保留了块级元素特性，而且完美兼容。就是代码有点多。另外你还可以使用表格的方式来水平居中。
说完了水平居中，下面说垂直居中。
如果元素是内联元素，并且只有一行，则我们可以通过line-height来设置与其高度同样大小，则实现了垂直居中了。
多行文字的水平垂直居中
一、大小不固定，多行文字的垂直居中
1、单行文字
可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。
例如，css代码：height:3em; line-height:3em; ……
2、多行文字
如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？
实现的关键是把文字当图片处理。
用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。
核心css代码：
外部div标签：
div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}
内部span标签：
span{display:inline-block; font-size:0.1em; vertical-align:middle;}
行数不固定文字垂直居中对齐
说明：
1，此例子用em做单位，如果您对em单位了解不够，把握不来的话，可以使用px做单位，值要换；
2，外部div不能使用浮动；
3，外部div高度和文字大小比例1.14为宜；
4，内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己试了一下，高度比字体1.5左右的样子；
5，系统原因，我没能够在IE8下测试。
二、大小不固定，图片的水平垂直居中
1、透明gif图片+背景定位的方法
这里利用了background-position:center实现图片居中显示。
微软必应图片搜索的图片排列就是使用的这种方法。
使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background- position:center center的属性。
而background-image建议写在页面上，因为实际项目中，这肯定是个动态的url地址，css文件似乎不支持动态URL 地址。
