CSS解決未知高度的垂直水平居中自適應問題

2024-07-11 08:24:13

字體：大中小

來源：轉載

供稿：網友

今天有人問起，晚上試著寫出來，供參考；以下代碼兼容主流瀏覽器IE6、IE7、Firefox、Opera。
從最簡單的開始…………
一、如何讓一個DIV水平居中？
這個簡單不作過多說明！

復制代碼

代碼如下:
<style>
body { text-align:center}
#info{ margin:0 auto; width:500px; text-align:left; border:1px solid #3333FF}
</style>
</head>
<body>
<div id="info">this is test.</div>
</body>

提示：您可以先修改部分代碼再運行

二、DIV已知高度，如何讓他水平加垂直居中？

如果想水平加垂直居中的DIV已知高度和寬度，是最好辦的了！
1、先讓這個DIV絕對定位；
2、讓他距離上邊50%，左邊50%；這會這個DIV的左上角這個點就是窗口的正中間；
3、因為已經知道了這個DIV的高和寬了，那么再從這里點向左移動總寬的一半就可以了，也就是200PX；向上呢也同理；

復制代碼

代碼如下:
<style>
#info{top:50%;left:50%; position:absolute; width:600px; height:400px; margin:-200px -300px; border:1px solid #f00;}
</style>
<div id="info">this is test.</div>

提示：您可以先修改部分代碼再運行

上一篇：條件CSS的介紹

下一篇：CSS教程：語義化方法替代結構化方法