css實現的div垂直居中效果

antzone發表於2017-03-03
CSS

讓div在元素中實現垂直居中的效果也是非常常見的，下面就通過程式碼例項介紹一下如何利用css實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:300px;
  height:300px;
  background:red;
  overflow:hidden;
}
#box .demo{
  width:100px;
  height:100px;
  background:blue;
  margin:0px auto;
  margin-top:100px;
}
</style>
</head>
<body>
<div id="box">
  <div class="demo"></div>
</div>
</body>
</html>

子div在父div中實現了水平垂直居中效果，水平居中非常的簡單，只要施加一下屬性即可:

[CSS] 純文字檢視 複製程式碼
margin:0px auto;

實現垂直居中則要進行一下計算，就是一個簡單的數學問題，只要將子元素的margin-top值設定為父元素的高度與子元素的高度差的二分之一即可。

相關文章