盒子水平垂直居中的五大解决方案

最新推荐文章于 2024-01-04 11:37:09 发布

qwguanbin

最新推荐文章于 2024-01-04 11:37:09 发布

阅读量283

点赞数

文章标签： css js

本文链接：https://blog.csdn.net/qwguanbin/article/details/107519442

版权

通过定位有三种解决方式

1-必须知道具体宽高

<style>
    html,
    body{
      height: 100%;
      overflow: hidden;
    }
    body{
      position: relative;
    }
    #box{
      width: 100px;
      height: 50px;
      background: #f30303;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -50px;
    }
</style>
<body>
  <div id="box"></div>
</body>

2-必须有宽高但不用考虑

<style>
    html,
    body{
      height: 100%;
      overflow: hidden;
    }
    body{
      position: relative;
    }
    #box{
      width: 100px;
      height: 50px;
      background: #f30303;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
</style>
<body>
  <div id="box"></div>
</body>

3-兼容性不太好

<style>
    html,
    body{
      height: 100%;
      overflow: hidden;
    }
    body{
      position: relative;
    }
    #box{
      width: 100px;
      height: 50px;
      background: #f30303;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
</style>
<body>
  <div id="box"></div>
</body>

4-flex布局

<style>
    html,
    body{
      height: 100%;
      overflow: hidden;
    }
    body{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #box{
      width: 100px;
      height: 50px;
      background: #f30303;
    }
</style>
<body>
  <div id="box"></div>
</body>

5-js

<style>
    html,
    body{
      height: 100%;
      overflow: hidden;
    }
    body{
      position: relative;
    }
    #box{
      width: 100px;
      height: 50px;
      background: #f30303;
    }
</style>
<div id="box"></div>
<script>
    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>

6-display:table-cell

7-dispaly:grid

qwguanbin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子水平垂直居中的五大解决方案

通过定位有三种解决方式1-必须知道具体宽高<style> html, body{ height: 100%; overflow: hidden; } body{ position: relative; } #box{ width: 100px; height: 50px; background: #f30303; position: absolute;
复制链接

扫一扫