div相對屏幕居中

div相對屏幕居中

沒有研究過這個問題的朋友以爲很難,實際上原理很簡單,主要記住如下3點就OK了。 

1. 先讓這個DIV絕對定位;

1. 讓他距離上邊50%,左邊50%;這會這個DIV的左上角這個點就是窗口的正中間;

1. 由於已經知道了這個DIV的高和寬了,那麼再從這裏點向左移動總寬及高的一半就能夠了.

舉個栗子： 

<div style="width:350px;height:300px;position:absolute;left:50%;top:50%;
margin-top:-150px;margin-left:-175px;border:solid #000 5px;">
</div>

代碼分析： 

• 第一點要求:position:absolute

• 第二點要求:left:50%;top:50%

• 第三點要求:margin-left:-175px [也就是-(350/2)] margin-top:-150px [也就是-(300/2)]
  • http://dcoupe.diandian.com/post/2011-04-12/11162821
  • http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html