在前端面試中,大都會問你div居中的方法:
文筆不好,就隨便寥寥幾句話概括了,
不過以后文筆肯定會變得更好一些的。
今天我們就細數(shù)一下幾種方法:
1,使用position:absolute,設(shè)置left、top、margin-left、margin-top的屬性
CSS Code復(fù)制內(nèi)容到剪貼板
.one{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:red;
}
這種方法基本瀏覽器都能夠兼容,不足之處就是需要固定寬高。
2,使用position:fixed,同樣設(shè)置left、top、margin-left、margin-top的屬性
CSS Code復(fù)制內(nèi)容到剪貼板
.two{
position:fixed;
width:180px;
height:180px;
top:50%;
left:50%;
margin-top:-90px;
margin-left:-90px;
background:orange;
}
大家都知道的position:fixed,IE是不支持這個屬性的
3,利用position:fixed屬性,margin:auto這個必須不要忘記了。
CSS Code復(fù)制內(nèi)容到剪貼板
.three{
position:fixed;
width:160px;
height:160px;
top:0;
rightright:0;
bottombottom:0;
新聞熱點
疑難解答