你的位置:首页 > 网页设计

[网页设计]css中常用的几种居中方法


在前端面试中,大都会问你div居中的方法:

文笔不好,就随便寥寥几句话概括了,

不过以后文笔肯定会变得更好一些的。

今天我们就细数一下几种方法:

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

 1 .one{ 2       position:absolute; 3       width:200px; 4       height:200px; 5       top:50%; 6       left:50%; 7       margin-top:-100px; 8       margin-left:-100px; 9       background:red; 10 }

这种方法基本浏览器都能够兼容,不足之处就是需要固定宽高。

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

 1 .two{ 2       position:fixed; 3       width:180px; 4       height:180px; 5       top:50%; 6       left:50%; 7       margin-top:-90px; 8       margin-left:-90px; 9       background:orange;10 }

大家都知道的position:fixed,IE是不支持这个属性的

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

 1 .three{ 2       position:fixed; 3       width:160px; 4       height:160px; 5       top:0; 6       right:0; 7       bottom:0; 8       left:0; 9       margin:auto;10       background:pink;11 }

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

.four{      position:absolute;      width:140px;      height:140px;      top:0;      right:0;      bottom:0;      left:0;      margin:auto;      background:black;}

5,利用display:table-cell属性使内容垂直居中

1 .five{2       display:table-cell;3       vertical-align:middle;4       text-align:center;5       width:120px;6       height:120px;7       background:purple;8 }

6,最简单的一种使行内元素居中的方法,使用line-height属性

1 .six{2       width:100px;3       height:100px;4       line-height:100px;5       text-align:center;6       background:gray;7 }

这种方法也很实用,比如使文字垂直居中对齐

7,使用css3的display:-webkit-box属性,再设置-webkit-box-pack:center/-webkit-box-align:center

1 .seven{2       width:90px;3       height:90px;4       display:-webkit-box;5       -webkit-box-pack:center;6       -webkit-box-align:center;7       background:yellow;8       color:black;9 }

8,使用css3的新属性transform:translate(x,y)属性

 1 .eight{ 2       position:absolute; 3       width:80px; 4       height:80px; 5       top:50%; 6       left:50%; 7       transform:translate(-50%,-50%); 8       -webkit-transform:translate(-50%,-50%); 9       -moz-transform:translate(-50%,-50%);10       -ms-transform:translate(-50%,-50%);11       background:green;12 }

这个方法可以不需要设定固定的宽高,在移动端用的会比较多,在移动端css3兼容的比较好

9、最高大上的一种,使用:before元素

.nine{      position:fixed;      display:block;      top:0;      right:0;      bottom:0;      left:0;      text-align:center;      background:rgba(0,0,0,.5);}.nine:before{      content:'';      display:inline-block;      vertical-align:middle;      height:100%;} .nine .content{      display:inline-block;      vertical-align:middle;      width:60px;      height:60px;      line-height:60px;      color:red;      background:yellow;}

这种方法在我的前面一片文章有详细的介绍:http://www.cnblogs.com/White-Quality/p/4530867.html