如何让元素页面居中

作者: 尤樊容 | 来源:发表于2017-03-23 19:07 被阅读603次

如何让元素页面居中
水平居中和垂直居中
css居中
页面元素居中
如何让元素居中
CSS常见样式2
MisShop居中效果实现技巧
关于CSS-1:不同类型盒子水平垂直居中
day03
如何让块元素居中

这分为两种情况：

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