css 垂直水平居中解决方案（6种）

最新推荐文章于 2024-06-16 22:45:39 发布

前端-小鑫

最新推荐文章于 2024-06-16 22:45:39 发布

阅读量92

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_43876728/article/details/119280504

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

第一种：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        .box{
            width: 300px;
             height: 300px;
             background: orange;
        }
        /*缺点：需要知道宽高*/
        .box{
            position: absolute;
            top: 50%;
            left: 50%; 
            margin-left: -150px;
            margin-top: -150px;
        }       
    </style>
    <body>
        <div class="box" id='box'>垂直水平居中</div>
    </body>
</html>

第二种：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        .box{
            width: 300px;
             height: 300px;
             background: orange;
        }
        /*不需要考虑宽高，但必须要有宽高*/
        .box{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    <body>
        <div class="box" id='box'>垂直水平居中</div>
    </body>
</html>

第三种：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        .box{
            width: 300px;
             height: 300px;
             background: orange;
        }
        /*可不需要宽高,但有不兼容*/
        .box{
            position: absolute;
            top: 50%;
             left: 50%; 
             transform: translate(-50%,-50%);
        }
    </style>
    <body>
        <div class="box" id='box'>垂直水平居中</div>
    </body>
</html>

第四种：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        /*控制文本 必须要有固定宽高 ，主要用于控制文本*/
        .bigbox{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            height: 300px;
            width: 300px;
            background: yellow;
        }
        .box{
            display: inline-block;
        }
    </style>
    <body>
        <div class="bigbox">
            <div class="box" >垂直水平居中</div>
        </div>
    </body>
</html>

第五种：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        /*flex*/
        .bigbox{
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            background-color: orange;
        }
    </style>
    <body>
        <div class="bigbox">
            <div class="box" >垂直水平居中</div>
        </div>
    </body>
</html>

第六种：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
       .box{
           width: 300px;
            height: 300px;
            background: orange;
        }
    </style>
    <body>
        <div class="box" id='box'>垂直水平居中</div>
    </body>
        <!--需要知道宽度-->
    <script type="text/javascript">
        let html=document.documentElement,
            winW=html.clientWidth,
            winH=html.clientHeight,
            boxW=box.offsetWidth,
            boxH=box.offsetHeight;
        box.style.position='absolute';
        box.style.left=(winW-boxW)/2+'px';
        box.style.top=(winH-boxH)/2+'px';
    </script>
</html>

前端-小鑫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 垂直水平居中解决方案（6种）

第一种：<html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> .box{ width: 300px; height: 300px; background:...
复制链接

扫一扫