css絕對定位元素垂直水平居中

antzone發表於2017-04-10
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:400px;
  height:300px;
  background:#ccc;
  position:relative;
}
#inner {
  width:150px;
  height:100px;
  background:red;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-75px;
  margin-top:-50px;
}
</style>
</head>
<body>
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，但是上面的方式有一個缺點，那就是元素如果尺寸未知，那麼就無法設定居中了。

負外邊距可以參閱css margin外邊距功能一章節。

可以使用css3的transform:translate()來解決此問題，程式碼例項如下:

[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:400px;
  height:300px;
  background:#ccc;
  position:relative;<font color="#0000ff">
}</font>
#inner {
  width:150px;
  height:100px;
  background:red;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%); 
}
</style>
</head>
<body>
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

關於transform:translate()用法可以參閱transform: translate()用法一章節。

不過上面的程式碼的程式碼存在一定的相容性問題，只有IE9+和其他標準瀏覽器才可以支援。

[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:400px;
  height:300px;
  background:#ccc;
  position:relative;
}
#inner {
  width:150px;
  height:100px;
  background:red;
  position: absolute; 
  left:0; 
  top:0; 
  right:0; 
  bottom: 0;
  margin: auto;
}
</style>
</head>
<body>
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

上面的程式碼也可以實現我們的要求，不過IE8以下瀏覽器不支援，不過要比上一種方式好多了。

分享了三種實現垂直水平居中的方式，大家可以根據具體情況選擇其中的一個。

相關文章