css元素的水平，竖直居中

一、水平居中

  1.文本图片水平居中：给父级元素设置text-align:center;

  2.确定宽度的块级元素居中：margin:0 auto;(margin-left,margin-right=0)

  3.不确定宽度的块级元素的居中:

      （1）用table帮助实现不确定宽度块级元素居中

                  <table><tr><td>块级元素</td></tr></table>

                  设置table元素margin:0 auto;

      （2）设置父级元素text-align:center;然后自身display:inline;

      （3）父元素设置float:left;position:relative;left:50%;自身设置position:relative;left:-50%;

二、竖直居中

  1.父级元素高度确定的单行文本:给父级元素设置行高等于父级元素高度（line-height=height）;

  2.父元素高度不确定的文本、图片、块级元素的垂直居中：给父级元素设置相同的padding（padding-top=padding-bottom)；

  3.父元素高度确定的多行文本、图片、块级元素的竖直居中:

  （1）vertical-align属性只有在父元素为td、th时才生效，其它元素默认不支持vertical-align；在firefox和IE8下可以设置display:table-cell，来激活                  vertical-align属性，当时IE6、7不支持display:table-cell，所以我们用最原始的笨办法，直接使用表格

          <table><tr><td>元素</td></tr></table>   td默认设置了vertical-align:middle;

（2）firefox和IE8用vertical-align:middle;display:table-cell;在IE6、7中用hack；

        .wrap{width:500px;height:200px;display:table-cell;vertical-align:middle;*position:relative;}
        .verticalWrap{*position:absolute;*top:50%;}
        .vertical{*position:relative;*top:-50%;}