水平垂直居中的佈局（定寬高和不定寬高）

1、定寬高

一、絕對定位和負margin值：

  <section class="absolute">
        <div></div>
   </section>
   <style>
    section{
            display:block;     
    }
    section.absolute {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        
        .absolute div {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%;
            top: 50%;
            margin: -25px 0 0 -25px;
            background-color: yellow;
        }
   </style>

二、絕對定位加 transform:

<section class="absoluteTransform">
        <div></div>
</section>
<style>
     section{
            display:block;
     }
     section.absoluteTransform {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            position: relative;
      }
        
      .absoluteTransform div {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%;
            top: 50%;
            background-color: yellow;
            -webkit-transform: translate(-50%, -50%);
       }
</style>

三、絕對定位 + left/right/bottom/top + margin:

<section class="absoluteM">
        <div></div>
</section>
<style>
        section{
            display: block;
       }
         section.absoluteM {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        
        .absoluteM div {
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }          
</style>    

四、flex 佈局：

    <section class="flex">
        <div></div>
    </section>
    <style>
        section{
           display: block;
        }
        section.flex {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .flex div {
            width: 50px;
            height: 50px;
            background: yellow;
        }
    </style>

五、grid佈局：

    <section class="grid">
        <div></div>
    </section>
    <style>
        section{
           display: block;
        }
         section.grid {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            display: grid;
        }
        
        .grid div {
            width: 50px;
            height: 50px;
            background-color: yellow;
            margin: auto;
        }
    </style>

六、table 佈局：

    <section class="table">
        <div></div>
    </section>
    <style>
        section{
           display: block;
        }
        section.table {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        
        .table div {
            width: 50px;
            height: 50px;
            background-color: yellow;
            display: inline-block;
        }
    </style>

2、不定寬高

一、絕對定位加 transform:

<div class="box">
      <div class="children-box">111111</div>
 </div>

<style>
 .box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
   position: absolute;
   background: yellow;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}       
</style>

二、table佈局：

<div class="box">
     <div class="children-box">111111</div>
</div>

<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.children-box {
   background: yellow;
   display: inline-block;
}
</style>

三、flex 佈局：

<div class="box">
    <div class="children-box">11111111</div>
</div>

<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.children-box {
    background: yellow;
}
</style>

四、flex 變異佈局：

<div class="box">
      <div class="children-box">11111111</div>
</div>

<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
}
.children-box {
    background: yellow;
    margin: auto;
}
</style>

五、grid + flex 佈局：

<div class="box">
       <div class="children-box">11111111</div>
</div>

<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    background: yellow;
    align-self: center;
    justify-self: center;
}
</style>

六、grid + margin 佈局：

<div class="box">
       <div class="children-box">11111111</div>
</div>

<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    background: yellow;
    margin: auto;
}
</style>