1. 程式人生 > >如何讓一個DIV水平,垂直方向都居中於瀏覽器?

如何讓一個DIV水平,垂直方向都居中於瀏覽器?

tex absolute idt osi gin nbsp border 實現 abs

<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
-->
</style>
<div>讓層垂直居中於瀏覽器窗口</div>

其實解決的思路是這樣的:首們需要position:absolute;絕對定位。而層的定位點,使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。

如:一個層寬度是400,高度是300。使用絕對定位距離上部與左部都設置成50%。而margin-top的值為-150。margin-left的值為-200。這樣我們就實現了層垂直居中於瀏覽器的樣式編寫。

如何讓一個DIV水平,垂直方向都居中於瀏覽器?