css實現瀏覽器垂直水平居中效果程式碼

antzone發表於2017-03-14
CSS瀏覽器

可能是由於居中相對美觀一些吧，所以一些彈窗或者功能模組出現的位置都是位於網頁中間，下面就介紹一端利用css實現的將div實現垂直水平居中的效果，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#antzone{ 
  position:absolute;
  top:50%;
  left:50%; 
  margin:-100px 0 0 -150px;
  width:300px;
  height:200px;
  z-index:99;
  background:green;
} 
</style>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的程式碼實現div垂直水平居中效果，下面簡單介紹一下原理。

實現原理:

首先設定div為絕對定位，然後將其top和left值分別設定為50%，但是這樣並沒有實現div的中心點垂直水平居中效果，而是將div的左上角實現了垂直水平居中，所以還得利用外邊距margin設定上邊距和左邊距分別為負數，尺寸分別是高和寬的一半，這樣就實現了中心點居中效果。

相關文章