flex彈性佈局實現元素垂直居中效果程式碼例項

admin發表於2017-02-19
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屬性用法詳解一章節。

相關文章