在css中我们想让一个div实现水平居中还是需要一些技巧的，下面我来总结了几个常用的垂直水平居中实例代码，大家可参考参考。
首先我们我们想到居中就是相对于当前窗口，上边距和左边距各一半即可，于是有了下边的css样式：
代码如下
复制代码
.center
{
left:50%;
top:50%;
position:fixed;
}
我们很快发现，问题还没有真正解决，
要实现居中，我们要将对象向左、向上分别移动图片宽度、高度的一半，所以最终的样式如下：
代码如下
复制代码
.center
{
left:50%;
margin-top:-50px;
margin-left:-100px;
top:50%;
position:fixed;
}
<p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<br/>
<br/>
<p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。
二、多行内容居中，且容器高度可变
也很简单，给出一致的 padding-bottom 和 padding-top 就行
代码如下
复制代码
.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：
容器不能固定高度
三、把容器当作表格单元
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
代码如下
复制代码
.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。
要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。
优点：
不用说了吧，就是表格，效果和表格一模一样
缺点：
IE下无效
总结：本篇可以看出，实现css居中其实并不难，有时候当我们明白了原理之后，事情就变得非常简单了
