关于绝对定位的元素水平垂直居中的总结

马上快元旦了，这一年即将过去了，新的一年又要开始了。元旦放假的时候会做一个年终总结。

关于绝对定位的元素水平居中的常用的方法有两种：

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>

效果如下：

关于绝对定位的元素水平垂直居中的总结

猜你喜欢