display:flex 圖片居中效果

admin發表於2019-07-20
Flex

本章節分享一段程式碼例項，它使用flex彈性佈局實現圖片垂直居中效果。

關於彈性佈局的更多內容可以參閱display:flex 彈性佈局一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta name="author" content="http://www.softwhy.com/" /> 
<meta charset="gb2312">
<title>螞蟻部落</title>
<style type="text/css">
.demo{
  width:500px;
  height:500px;
  border:2px solid #ddd;
  background:#f5f5f5;
  padding:6px;
  float:left;
  margin-left:20px;
  
  /*flex佈局（作用於容器）*/
  display:flex;
  
  /*水平居中（作用於容器）*/
  justify-content:center;
  
  /*垂直居中（作用於容器）*/
  align-items:center;
}
.demo img{
  max-width:100px;
  max-height:100px;
  width:auto;
  height:auto;
}
</style>
</head>
<body>
<div class="demo">
  <img src="demo/CSS/img/girl.jpg">
</div>
</body>
</html>

上面的程式碼實現了我們的要求，當然有一定的瀏覽器支援性問題。

相關文章