css中常用的几种居中方法

1:使用position:absolute,设置left、top、margin-left、margin-top的属性

position:absolute;
             width:200px;
            height:200px;
             top:50%;
             left:50%;
             margin-top:-100px;
             margin-left:-100px;
             background:red; 

2:使用position:fixed,同样设置left、top、margin-left、margin-top的属性

position:fixed;
             width:180px;
             height:180px;
              top:50%;
              left:50%;
              margin-top:-90px;
              margin-left:-90px;
              background:orange;

3:利用position:fixed属性,margin:auto这个必须不要忘记了。

position:fixed;
              width:160px;
              height:160px;
              top:0;
              right:0;
              bottom:0;
              left:0;
              margin:auto;
             background:pink;

4:利用position:absolute属性,设置top/bottom/right/left

position:absolute;
            width:140px;
            height:140px;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            background:black;
5,利用display:table-cell属性使内容垂直居中
display:table-cell;
             vertical-align:middle;
            text-align:center;
            width:120px;
            height:120px;
            background:purple;
6最简单的一种使行内元素居中的方法,使用line-height属性
width:100px;
            height:100px;
            line-height:100px;
             text-align:center;
            background:gray;
posted @ 2016-03-27 16:11  赵兵  阅读(266)  评论(0)    收藏  举报