用CSS將登錄框水平垂直居中于瀏覽器

道小然 2014-09-23

展開全文

用CSS將登錄框水平垂直居中于瀏覽器，代碼：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
html,body{ margin:0; padding:0; border:0; background-color:#333;}
#loginPanel{background-color:#eee;}
</style>
</head>

<body>

這里是登錄

</div>

要點(diǎn)：

1、登錄面板div絕對布局（position:absolute;），位置top和left都是50%（相對于瀏覽器窗口尺寸）；
（現(xiàn)在若登錄面板div寬度和高度都是0的話，它就剛好居中了。……那為0有什么用？！……當(dāng)然沒用，只是說明原理）

2、要定死登錄面板div的寬度和高度，一定要定死！例如：width:480px;height:240px;

3、登錄面板div有寬度和高度了，那它就不居中了，它有多寬，整個(gè)面板div就會(huì)向右偏移寬度的一半；它有多高，就會(huì)向下偏移高度的一半。

4、再移回去！例如：margin-left:-240px;margin-top:-120px;

完成！

本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：道小然 > 《個(gè)人筆記》

舉報(bào)/認(rèn)領(lǐng)