css實現div全屏水平垂直居中效果程式碼例項

antzone發表於2017-03-03
CSS

本章節介紹一下如何讓一個div實現在全屏中垂直水平居中效果，這個效果在很多實際應用中都可以看到，比如彈出登陸視窗或者警告視窗等等，下面就介紹一下如何讓一個div實現在全屏中垂直水平居中。

程式碼如下:

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

以上程式碼實現了我們的要求，能夠將div設定為全屏垂直水平居中，下面就做一下簡單介紹。

div使用的是絕對定位，那麼left和top值的確定就是關鍵所在，很多人感覺如下設定就會實現此效果:

[CSS] 純文字檢視 複製程式碼
left:50%; 
top:50%;

但是上面的程式碼只是將div的左上角設定為垂直水平居中，而不是div的中心點垂直水平居中，所以再分別向相反的方向移動半個寬度和高度就可以實現我們的要求了。

相關文章