調整視窗大小也能夠實現div水平垂直居中程式碼例項

admin發表於2017-03-09

將一個div在視窗內實現居中效果，基本上沒有什麼難度，具體可以參閱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">
*{
  margin:0px;
  padding:0px;
} 
#thediv{
  width:200px;
  height:100px;
  background:green;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-50px;
}
</style>  
</head> 
<body>
<div id="thediv"></div>
</body> 
</html>

上面的程式碼實現了我們的要求，因為div採用的是絕對定位，並且採用百分比的方式來確定div的基本位置，不是採用固定尺寸的方式，然後在使用外邊距向回撥整一定的距離，這樣就實現了居中效果，同時調整瀏覽器視窗也會實現一直居中的效果。

相關文章