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绝对定位元素垂直水平居中属于前端实例代码,有关更多实例代码大家可以查看。