flex彈性佈局 垂直居中

admin發表於2019-10-17
Flex
關於flex彈性佈局的基本概念可以參閱display:flex彈性佈局一章節。

下面分享一段程式碼例項，它實現了讓元素水平垂直居中效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
#box {
  width:500px;
  height:400px;
  background:#ccc;
  display:flex;
  justify-content:center;
  align-items:center;
}
#antzone {
  width:50px;
  height:50px;
  background:green;
}
</style>     
</head>
<body>
<div id="box">
  <div id="antzone"></div>
</div>
</body>
</html>

利用彈性佈局實現垂直居中非常簡單，更多內容可以參閱相關閱讀。

相關閱讀：

（1）.justify-content參閱justify-content 屬性一章節。

（2）.align-items參閱align-items 屬性一章節。

相關文章