css绝对定位元素垂直水平居中

我心飞翔 分类:实例代码

本章节介绍一下如何让绝对定位的元素垂直水平居中。

先看一段代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()来解决此问题,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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+和其他标准浏览器才可以支持。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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以下浏览器不支持,不过要比上一种方式好多了。

分享了三种实现垂直水平居中的方式,大家可以根据具体情况选择其中的一个。

css绝对定位元素垂直水平居中,这样的场景在实际项目中还是用的比较多的,关于css绝对定位元素垂直水平居中就介绍到这了。

css绝对定位元素垂直水平居中属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容