如何让元素页面居中

最新推荐文章于 2024-11-27 00:43:03 发布

youyou_builder

最新推荐文章于 2024-11-27 00:43:03 发布

阅读量786

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/youyouyouyou44/article/details/82457393

本文详细介绍了在CSS中如何实现元素的居中对齐，包括有固定宽高和内容自适应两种情况。通过定位、margin、transform和表格布局等方法，以及CSS3的flexbox，提供了多种居中解决方案，并附带了各方法的效果说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这分为两种情况：

1、有宽高的情况下，实现水平和垂直居中

方法一：使用定位 position:absolute;left和top值为50%；然后margin的left和top减去宽高的一半。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background-color:red;
            position:absolute;
            left:50%;
            top:50%;
            margin: -100px 0 0 -100px;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

效果图：

Paste_Image.png

方法二：使用定位position:absolute;四个方向值都是0，然后margin：auto；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color:red;
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
        }
    </style>
</head>
<body>
<div class="box">有宽高的div</div>
</body>
</html>

效果图同上。

2、没有宽高的情况下，元素宽高由内容撑开

方法一：结合css3的transform:translate(-50%,-50%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            background-color:red;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
<div class="box">没有宽高的div，大小由内容撑开</div>
</body>
</html>

效果图：

Paste_Image.png

方法二：使用js实现，实现水平和垂直居中，原理和第一种情况的第一种方法一样，使用定位和margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            background-color:red;
            padding: 10px;/*主要用于说明获取宽高的问题*/
        }
    </style>
</head>
<body>
<div class="box" id="div1">用js实现水平垂直居中</div>
</body>
<script>
    document.addEventListener('DOMContentLoaded',function(){
        var oDiv = document.getElementById('div1');
        //alert(oDiv.clientWidth);//有padding的时候是180px，没有padding的时候是160px
        oDiv.style.position = "absolute";
        oDiv.style.left = "50%";
        oDiv.style.top = "50%";
        oDiv.style.marginLeft =  -(oDiv.clientWidth/2) + "px";
        oDiv.style.marginTop =  -(oDiv.clientHeight/2) + "px";
    },false);
</script>
</html>

效果图：

Paste_Image.png

方法三：使用表格display：table-cell，把其父级变成表格样式，再利用表格的样式来进行居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width:500px;
            height:500px;
            border:1px solid black;
            display:table-cell;
            text-align:center;
            vertical-align:middle;
        }
        .box{
            background-color:red;
            display:inline-block;
        }
    </style>
</head>
<body>
<div class="box">使用表格实现垂直水平居中</div>
</body>
</html>

效果图：

Paste_Image.png

以下是关于display：table-cell的相关解释：

Paste_Image.png

方法四：利用CSS3弹性盒模型（flexBox）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width:400px;
            height:400px;
            border:1px solid black;
            display:flex;
            justify-content: center;
            align-items:center;
        }
        .box{
            background-color: red;
        }
    </style>

</head>
<body>
<div class="box">弹性盒模型</div>
</body>
</html>

效果图：

Paste_Image.png