盒子水平居中（详解）

最新推荐文章于 2022-09-25 20:41:54 发布

未来前端程序员

最新推荐文章于 2022-09-25 20:41:54 发布

阅读量324

点赞数

分类专栏： web前端面试题文章标签： css

本文链接：https://blog.csdn.net/weixin_44735018/article/details/117397697

版权

web前端同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

面试题

31 篇文章 1 订阅

订阅专栏

掌握盒子水平垂直居中的五点方案

定位（有三种方式）
display：flex
JavaScript
display：table-cell

定位

第一种

<style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .box{
            width: 100px;
            height: 50px;
            box-sizing: border-box;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            border: 1px solid lightblue;
            background: lightblue;
        }
        /* 定位1 */
        body{
            position: relative;
        }
        .box{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -25px;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="box">
        哒哒哒哒
    </div>
</body>

注意：这种方式要设置了html,body{ height: 100%; overflow: hidden; }才会生效

第二种

第二种的方法考虑到box没有宽高或者是在页面中自适应的情况
此时又该怎么办呢？

.box{
     position: absolute;
     top:0;
     left:0;
     right: 0;
     bottom: 0;
     margin: auto;
     }

第三种

还可以使用下面这一种，但是兼容性不是很好

.box{
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
  }

使用display：flex

该方法兼容性也不是很好

 <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .box{
            width: 100px;
            height: 50px;
            box-sizing: border-box;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            border: 1px solid lightblue;
            background: lightblue;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="box">
        哒哒哒哒
    </div>
</body>

使用JavaScript方法

       html,body{
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        .box{
            width: 100px;
            height: 50px;
            box-sizing: border-box;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            border: 1px solid lightblue;
            background: lightblue;
        }    
<div class="box" id="box">
        哒哒哒哒
    </div>    
<script>
        let HTML = document.documentElement,
            box = document.getElementById('box'), 
            winH = HTML.clientHeight,
            winW = HTML.clientWidth,
            boxW = box.offsetWidth,
            boxH = box.offsetHeight;
            box.style.position = 'absolute';
            box.style.top = (winH-boxH)/2+'px';
            box.style.left = (winW-boxW)/2+'px';
    </script>

使用display：table-cell

但是使用这个是需要在父级上加上该属性，并且父级要有固定的宽高

.wrapper{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            /* 固定宽高 */
            width:500px;
            height: 500px;
            background: chartreuse;
        }
        .box{
            display: inline-block;
        }
<div class="wrapper">
     <div class="box" id="box">
          哒哒哒哒
      </div>
</div>

未来前端程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子水平居中（详解）

掌握盒子水平垂直居中的五点方案定位（有三种方式）display：flexJavaScriptdisplay：table-cell定位第一种<style> html,body{ height: 100%; overflow: hidden; } .box{ width: 100px; height: 50px; b
复制链接

扫一扫