绝对定位元素的水平垂直居中的方法

最新推荐文章于 2023-04-12 14:31:51 发布

望幸福

最新推荐文章于 2023-04-12 14:31:51 发布

阅读量235

点赞数 1

分类专栏： CSS 文章标签：绝对定位居中垂直居中水平居中绝对元素不固定大小水平垂直居中

本文链接：https://blog.csdn.net/weixin_42954590/article/details/85250717

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一种方法

缺点：需要提前知道元素的宽度和高度。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 600px;
            border:1px solid #333;
            position: absolute; 
            left: 50%;
            top: 50%;
            margin-top: -200px;    /* 高度的一半 */
            margin-left: -300px;    /* 宽度的一半 */
        }
    </style>
</head>
<body>
   <div>相对定位元素
        <div class="box">绝对定位元素</div>
    </div>
</body>
</html>

第二种方法

当元素的尺寸不固定时，都可以居中。不过IE8以上才兼容这种写法，移动端可忽略。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 600px;
            border:1px solid #333;
            position: absolute; 
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
        }
    </style>
</head>
<body>
   <div>相对定位元素
        <div class="box">绝对定位元素</div>
    </div>
</body>
</html>入代码片

第三种方法

使用margin：auto实现居中；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 600px;
            border:1px solid #333;
            position: absolute; 
            left: 0;
            top: 0; 
            right: 0; 
            bottom: 0;
            margin: auto;    /* 有了这个就自动居中了 */
        }
    </style>
</head>
<body>
   <div>相对定位元素
        <div class="box">绝对定位元素</div>
    </div>
</body>
</html>