css如何實現未知寬高div中圖片垂直水平居中效果

antzone發表於2017-03-11
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">
#thediv{
  width:200px;
  height:200px;
  background:red;
  text-align:center;
  display:table-cell; 
  vertical-align:middle;
}
</style>
</head>
<body>
<div id="thediv"><img src="mytest/demo/1.jpg"></div>
</body>
</html>

上面你的程式碼可以讓圖片垂直水平居中，當然這裡，div的尺寸是固定的，只是為了演示用的，未知尺寸也是可以實現垂直水平居中的，關鍵程式碼如下:

[CSS] 純文字檢視 複製程式碼
display:table-cell; 
vertical-align:middle;

程式碼存在一定的相容問題，當然問題不大，因為IE7和IE6瀏覽器很快就被淘汰了.

相關文章