CSS居中小结

一、水平居中：

    1.text-align:center;

    2.margin:0 auto;或margin:auto;(要设置宽度，否则没有效果。)

    3.position：absolute;left:50%;(绝对定位，一般不使用)

    4.position：relative;left:50%;（相对定位）

二、竖直居中

    1.{

      line-height:500px;(所需页面总高度)

      vertical:middle;

}

    2.单行内容居中：

      {

        height: 500px;

line-height: 500px;

overflow: hidden;

}

    3.多行内容居中：{

      padding-top: 200px;

      padding-bottom: 200px;（与上下边界的距离相等）

}

    4.{

      display: table-cell;（把元素当作表格单元来显示）

      height: 300px;

      vertical-align: middle;

}

     5.{

       position:fixed;（IE不支持）

       width:180px;

       height:180px;

       top:50%;

       left:50%;

       margin-top:-90px;

       margin-left:-90px;

}

     6.{

        position:absolute;

        width:140px;

height:140px;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

background:black;

}