元素的居中显示

一、垂直居中显示的方法

1、对于单行文本元素, 设置元素的样式属性：

line-height = height

优点：适合所有浏览器，没有足够空间时，内容不会被切掉
缺点：仅适合应用在文本和图片上，当文本不是单行时，效果极差

2、设置元素的样式属性：

.test{
    height:500px;
    width:500px;
    top:50%;
    left:50%;
    margin-top:-250px;
    margin-left:-250px;
    position:absolute;
}

优点：能在各个浏览器工作，结构简单明了，不需增加额外的标签
缺点：由于固定死元素的高度，致使没有足够的空间时，当内容超过元素的大小时会出现滚动条
注意：这是使元素垂直居中，不是元素的内容。如果要使元素内容剧中，参考方法1

3、使用div模拟表格效果

<div class='outer'>
        <div class='inner'>
        <div class='inner'>
</div>
.outer{
        height:500px;
        width:500px;
        display:table;
        border:5px solid red;
}
.inner{
        display: table-cell;
        vertical-align: middle
}

优点：元素内容不会因为没有足够的空间而被切断或者出现滚动条。
缺点：结构复杂，IE6-IE7无法正常运行

二、水平居中显示的方法

1、参考垂直居中显示的方法2

2、设置元素的margin
a)设置元素的宽度
b) margin-left: 0 auto

.test{
      width:500px;
      margin: 0 auto;
}

3、设置元素的样式属性text-align

.test{
       text-align: center
}

未完！