如何讓絕對定位的元素水平居中

螞蟻小編發表於2017-04-16

如果一個塊級元素沒有采用絕對定位，那麼使用margin:0px auto就可以實現此效果。

但是對於採用絕對定位的元素並不適用，下面就介紹一下如何實現此效果。

程式碼例項如下:

[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:blue;
  position:relative;
}
.inner{
  width:50px;
  height:50px;
  background:red;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-25px;
  margin-top:-25px;
}
</style>
</head> 
<body> 
<div class="box">
  <div class="inner"></div>
</div>
</body> 
</html>

程式碼非常簡單，是一個比較簡單的數學問題，設定了left:50%之後，使元素的左上角水平居中，但是並不是元素的中心點水平居中，這樣再使用margin-left方式設定一個負外邊距，值恰好是元素寬度的一半，這樣元素中心點就水平居中了。對於垂直居中也是同樣的道理。

相關文章