盒子水平垂直居中的几种方案

最新推荐文章于 2024-06-18 18:55:30 发布

呼呼_fjr

最新推荐文章于 2024-06-18 18:55:30 发布

阅读量293

点赞数 1

分类专栏： CSS 文章标签： html css flex

本文链接：https://blog.csdn.net/weixin_45105327/article/details/108377773

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

方案划分为：

定位3种
display:flex;
JavaScript
display:table-cell

方案一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>方案一</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        html,
        body{
            height:100%;
            overflow: hidden;
        }
        .box{
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            line-height: 50px; 
            text-align: center;
            font-size: 16px;
            background-color: pink;
        }

        /* 定位一 */
        body{
            position: relative;
        }
        .box{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;/* 高的一半 */
            margin-left: -75px;/* 宽的一半 */
        }
    </style>
</head>
<body>
    <div class="box">
		方案一
    </div>
</body>
</html>

这种方案要知道盒子(.box)的具体宽高，因为是通过宽和高来算margin的值的。

方案二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>方案二</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        html,
        body{
            height:100%;
            overflow: hidden;
        }
        .box{
            box-sizing: border-box;
             width: 100px;
            height: 50px;
            line-height: 50px; 
            text-align: center;
            font-size: 16px;
            background-color: pink;
        }

        /* 定位二 */
        body{
            position: relative;
        }
        .box{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom:0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
		方案二 
    </div>
</body>
</html>

这种方案不用考虑盒子(.box)宽高，但是盒子(.box)一定要具备宽高。

方案三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>方案三</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        html,
        body{
            height:100%;
            overflow: hidden;
        }
        .box{
            box-sizing: border-box;
            width: 100px;
            /* height: 50px;
            line-height: 50px;  */
            text-align: center;
            font-size: 16px;
            background-color: pink;
        }

        /* 定位三 */
        body{
            position: relative;
        }
        .box{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="box">
		方案三
    </div>
</body>
</html>

这种方式可以内容能撑开多高就多高，也可以按真实高度处理，这种方式不用具体宽高。但是存在兼容性问题。

方案四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>方案四</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        html,
        body{
            height:100%;
            overflow: hidden;
        }
        .box{
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            line-height: 50px; 
            text-align: center;
            font-size: 16px;
            background-color: pink;
        }

        /* flex */
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
       
    </style>
</head>
<body>
    <div class="box">
        方案四
    </div>
</body>
</html>

在移动端经常会使用这种方式。

方案五

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>方案五</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        html,
        body{
            position: relative;
            height:100%;
            overflow: hidden;
        }
        body{
           
        }
        .box{
            position: absolute;
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            line-height: 50px; 
            text-align: center;
            font-size: 16px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        方案五
    </div>
    <script>
        let html = document.documentElement,
            winW = html.clientWidth,//可见区域宽
            winH = html.clientHeight,//可见区域高
            boxW = box.offsetWidth,//盒子宽度
            boxH = box.offsetHeight;//盒子高度
            box.style.left = (winW - boxW) / 2 + 'px';
            box.style.top = (winH - boxH) / 2 + 'px';
    </script>
</body>
</html>

这种方式是通过js来实现的。

方案六

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>方案六</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        html,
        body{
            position: relative;
            height:100%;
            overflow: hidden;
        }
        .content{
           display: table-cell;
           vertical-align: middle;
           text-align: center;
           /* 固定宽高 */
           width: 700px;
           height: 700px;
           background-color: aqua;
        }
        .box{
           display: inline-block;
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            line-height: 50px; 
            text-align: center;
            font-size: 16px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box" id="box">
            方案六
        </div>
    </div>
    
</body>
</html>