马上快元旦了,这一年即将过去了,新的一年又要开始了。元旦放假的时候会做一个年终总结。
关于绝对定位的元素水平居中的常用的方法有两种:
1.使用transform方法,这个方法的主要用法是
transform : translate(-50%,-50%);
其中可以这样改写:x轴上,transform : translateX(-50%);
y轴上,transform : translateY(-50%);
下面是一个小例子,仅供参考:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素的垂直居中</title> <style> .elem1{ position: relative; width: 500px; height: 500px; border: 1px solid red; } .elem2{ position: absolute; width: 200px; height: 200px; border: 1px solid #9521de; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <div class="elem1"> <div class="elem2"></div> </div> </body> </html>效果如下:
不过transform是css3里面的内容,所以存在兼容性问题;IE9(-ms-), IE10+以及其他现代浏览器才支持(手机web开发可忽略)。
2.使用 margin:auto实现绝对定位元素的水平垂直居中
这个方法是从张鑫旭大神写的文章中看到的,所以放在一块总结一下
这个方法主要有两点需要注意,就是绝对定位的元素一定要设置为top:0;right:0;bottom:0;left:0;margin:auto;
这样才能实现绝对定位,至于原理下面会说的,莫急
先看实例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin auto实现元素的水平垂直居中</title> <style> .elem3{ position: relative; width: 500px; height: 500px; border: 1px solid #2195de; left: 500px; top: 500px; } .elem4{ position: absolute; width: 200px; height: 200px; border: 1px solid red; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <div class="elem3"> <div class="elem4"></div> </div> </body> </html>
效果如下: