CSS居中小结

tianzyc 2016-04-30

一、水平居中:

    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;

}

相关推荐