垂直/水平居中

垂直/水平居中的几种方法:
1.[原理] 设定宽度和高度，父节点为 position:relative; CSS是这样写的:

position:absolute;left:50%;top:50%;

margin-left:-元素自身宽度的一半;

margin-top:-元素自身高度的一半;

2.[原理] table, 用起来就更简单了, 只要添加:

text-algin:center;

vertical-align:middle;

[方法] 提供模板化的CSS class方法, 规则如下:

<div class="sl-hvalign" style="width:500px"> <!-- 记得加宽度, 不要写行内样式, 这里只是一个提示 -->

 <div class="sl-hvalign-cnt">

         <div class="sl-hvalign-cnt-inner">

               <a title="易享购" href="http://www.eologo.cn/"><img alt="易享购" src="http://www.eologo.cn/index/Tpl/default//public/images/logo.gif"></a>

         </div>

 </div>

</div> <!-- .sl-hvalign -->

样式:

.sl-hvalign{

    display:table;

    overflow:hidden;

    margin:0 auto;

    height: 100%;

    *position:relative;

}


.sl-hvalign-cnt{

    display:table-cell;

    vertical-align: middle;

    *position:absolute;

    top:50%;

}


.sl-hvalign-cnt-inner{

    *position:relative;

    *top:-50%;

}