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

最新推荐文章于 2024-09-02 03:44:41 发布

原创最新推荐文章于 2024-09-02 03:44:41 发布 · 358 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #js

本文详细介绍了六种实现网页元素居中的方法，包括绝对定位、Flex布局、Table-cell、Grid布局及JS动态调整等，每种方法均有其适用场景与优劣考量。

通过定位有三种解决方式

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