子盒子在父盒子中水平垂直居中顯示的幾種方式

絕對定位方式-子盒子必須有寬高

先通過設置子盒子的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>