子盒子在父盒子中水平垂直居中显示的几种方式

最新推荐文章于 2023-09-11 08:21:22 发布

小凳子腿

最新推荐文章于 2023-09-11 08:21:22 发布

阅读量2.2k

点赞数 1

文章标签：盒子水平垂直居中盒子水平垂直居中方式

本文链接：https://blog.csdn.net/Liu_yunzhao/article/details/106125096

版权

绝对定位方式-子盒子必须有宽高

先通过设置子盒子的left、top为50%，让子盒子左上角处于中间位置，再通过设置子盒子的
margin-left、margin-top 把盒子移动到居中的位置

 <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    .wrapper{
        width: 800px;
        height: 800px;
        background-color: #eee;
        margin: 0 auto; /*让父盒子水平居中*/
        position: relative;
    }
    .inner{
        width: 400px;
        height: 400px;
        background-color: red;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -200px;
    }
 </style>

 <div class="wrapper">
     <div class="inner"></div>
 </div>

通过定位方式 - 子盒子必须有宽高

给子盒子设置left、right、top、bottom都为0，再设置margin:auto让子盒子居中显示，是不是有一种弹性盒子的感觉

 <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }

    .wrapper{
        width: 800px;
        height: 800px;
        background-color: #eee;
        margin: 0 auto;
        position: relative;
    }
    .inner{
        width: 400px;
        height: 400px;
        background-color: red;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

 </style>

 <div class="wrapper">
     <div class="inner"></div>
 </div>

绝对定位方式-子盒子不必写宽高

先通过设置子盒子的left、top为50%，让子盒子左上角处于中间位置，再通过设置子盒子的
transform: translate(-50%, -50%)把盒子移动到中间位置，这种方式当子盒子没有宽高也可实现居中显示

 <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }

    .wrapper{
        width: 800px;
        height: 800px;
        background-color: #eee;
        margin: 0 auto;
        position: relative;
    }
    .inner{
        width: 400px;
        height: 400px;
        background-color: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /*transform: translate(-200px, -200px); 有宽高时可设置具体值*/
    }
 </style>
 <div class="wrapper">
     <div class="inner">
     </div>
 </div>

通过flex弹性盒子 - 子盒子不必写宽高

 <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .wrapper {
        width: 800px;
        height: 800px;
        background-color: #eee;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .inner {
        /*width: 400px; 有宽高时可设置具体值*/
        /*height: 400px; 有宽高时可设置具体值*/
        background-color: red;
    }
 </style>

 <div class="wrapper">
     <div class="inner">
     </div>
 </div>

使用js方式居中

子盒子是块元素不指定宽高

 <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    .wrapper {
        width: 800px;
        height: 800px;
        background-color: #eee;
        margin: 0 auto;
    }

    .inner {
        background-color: red;
        word-break: break-all;
    }
 </style>

 <div id="wrapper" class="wrapper">
     <div id="inner" class="inner">123456789</div>
 </div>

 <script>

   let wrapper = document.getElementById('wrapper');
   let inner = document.getElementById('inner');

   let wrapperWidth = wrapper.offsetWidth;
   let wrapperHeight = wrapper.offsetHeight;

   inner.style.display = 'inline-block';
   inner.style.maxWidth = inner.offsetWidth;
   inner.style.maxHeight = inner.offsetHeight;
   let innerWidth = inner.offsetWidth;
   let innerHeight = inner.offsetHeight;
   wrapper.style.overflow = 'hidden';
   inner.style.marginLeft = (wrapperWidth - innerWidth) / 2 + "px";
   inner.style.marginTop = (wrapperHeight - innerHeight) / 2 + "px";
 </script>

若指定宽高则去掉inner.style.display = ‘inline-block’ 即可，当然也有很多边界需要处理

子盒子是行内元素，不指定宽高

 <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    .wrapper {
        width: 800px;
        height: 800px;
        background-color: #eee;
        margin: 0 auto;
    }

    .inner {
        background-color: red;
        word-break: break-all;
    }
 </style>
 <div id="wrapper" class="wrapper">
     <span id="inner" class="inner">123456789</span>
 </div>

 <script>
     let wrapper = document.getElementById('wrapper');
     let inner = document.getElementById('inner');

     let wrapperWidth = wrapper.offsetWidth;
     let wrapperHeight = wrapper.offsetHeight;

     //需要把行内元素转换成行内块元素
     inner.style.display = 'inline-block';
     let innerWidth = inner.offsetWidth;
     let innerHeight = inner.offsetHeight;
     wrapper.style.overflow = 'hidden';
     inner.style.marginLeft = (wrapperWidth - innerWidth) / 2 + "px";
     inner.style.marginTop = (wrapperHeight - innerHeight) / 2 + "px";
 </script>