【CSS】8種常見的垂直水平居中方法

1.比較傳統的方式 absolute+margin負值偏移

特點：父容器要設置寬高，需要知道子容器寬高，偏移量是子容器寬高的一半且是負值，兼容性好

  /* absolute+margin負值偏移佈局 */

  .layout.absolute {
      position: relative;
  }

  .layout.absolute  article {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -160px;
  }
        
   <section class="layout absolute">
       <article>
           <p>
               1.absolute+margin負值偏移<br>
               （父容器要設置寬高，需要知道子容器寬高）
           </p>
       </article>
   </section>

2.absolute+transform佈局

特點：父容器要設置寬高


  /* absolute+transform佈局 */
  .layout.transform {
      position: relative;
  }

  .layout.transform article {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
  }

   <section class="layout transform">
       <article>
           <p>2.absolute+transform<br>
           （父容器要設置寬高）
           </p>
       </article>
   </section>

3.flex佈局

特點：自適應

  /* flex佈局 */
  .layout.flex {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  <section class="layout flex">
      <article>
          <p>3.flex<br>（自適應）</p>
      </article>
  </section>

4.table-cell佈局

特點：比其他方法多1個容器，注意邊距重疊

  .layout.table-cell {
      display: table;
      width: 100%;
  }

  .layout.table-cell .outer {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
  }

  .layout.table-cell article {
      margin: 0 auto;
      overflow: auto;
  }
  
  <section class="layout table-cell">
      <div class="outer">
          <article>
              <p>
                  4.table-cell<br>（多1個容器，注意邊距重疊）
              </p>
          </article>                      
      </div>
  </section>

5.grid佈局

特點：自適應,要考慮兼容性

   .layout.grid{
       display: grid;
   }

   .layout.grid article {
       justify-self: center;
       align-self: center;
   }

   <section class="layout grid">
       <article>
           <p>5.grid<br>（自適應,要考慮兼容性）</p>
       </article>
   </section>

6.inline-block佈局

特點：自適應，兼容性好

   .layout.inline-block {
       text-align: center;
   }

   .layout.inline-block::after {
       content: '';
       height: 100%;
       display: inline-block;
       vertical-align: middle;
   }

   .layout.inline-block article {
       display: inline-block;
       vertical-align: middle;
   }
        
    <section class="layout inline-block">
        <article>
            <p>6.inline-block<br>（自適應）</p>
        </article>
    </section>

7.absolute + margin-auto 佈局

特點：內外容器都要設置寬高，兼容性好

  .layout.margin-auto {
      position: relative;
  }

  .layout.margin-auto article{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }
        
   <section class="layout margin-auto">
       <article>
           <p>7.absolute + margin-auto<br>(內外容器都要設置寬高) </p>
       </article>
   </section>

8.line-height 佈局

特點：只適合單行inline，而且要知道父容器的高度，兼容性好

 .layout.line-height {
     line-height: 150px;
 }

 .layout.line-height article {
     display: inline;
     margin:  auto;
 }
  <section class="layout line-height">
      <article>
          <p>8.line-height(只適合單行inline，而且要知道父容器的高度)</p>
      </article>
  </section>

完整例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中</title>
    <style>
        html,body {
            padding: 0;
            margin: 0;
        }
        .layout {
            margin-bottom: 15px;
            height: 150px;
            background-color: blueviolet;
            background-clip: content-box;
        }

        .layout article {
            background-color: lightcoral;
            color: #fff;
            width: 320px;
            height: 100px;  
            text-align: center;
        }

        /* absolute+margin負值偏移佈局 */

        .layout.absolute {
            position: relative;
        }

        .layout.absolute  article {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -160px;
        }

        /* absolute+transform佈局 */
        .layout.transform {
            position: relative;
        }

        .layout.transform article {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        /* flex佈局 */
        .layout.flex {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* table-cell佈局 */
        .layout.table-cell {
            display: table;
            width: 100%;
        }

        .layout.table-cell .outer {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .layout.table-cell article {
            margin: 0 auto;
            overflow: auto;
        }

        /* grid佈局 */
        .layout.grid{
            display: grid;
        }

        .layout.grid article {
            justify-self: center;
            align-self: center;
        }

        /* inline-block佈局 */
        .layout.inline-block {
            text-align: center;
        }

        .layout.inline-block::after {
            content: '';
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

        .layout.inline-block article {
            display: inline-block;
            vertical-align: middle;
        }


        /* absolute + margin-auto */
        .layout.margin-auto {
            position: relative;
        }

        .layout.margin-auto article{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        /* line-height 佈局 */
        .layout.line-height {
            line-height: 150px;
        }

        .layout.line-height article {
            display: inline;
            margin:  auto;
        }

    </style>
</head>
<body>
    <section class="layout absolute">
        <article>
            <p>
                1.absolute+margin負值偏移<br>
                （父容器要設置寬高，需要知道子容器寬高）
            </p>
        </article>
    </section>

    <section class="layout transform">
        <article>
            <p>2.absolute+transform<br>
                （父容器要設置寬高）
            </p>
        </article>
    </section>

    <section class="layout flex">
        <article>
            <p>3.flex<br>（自適應）</p>
        </article>
    </section>

    <section class="layout table-cell">
        <div class="outer">
            <article>
                <p>
                    4.table-cell<br>（多1個容器，注意邊距重疊）
                </p>
            </article>
        </div>
    </section>

    <section class="layout grid">
        <article>
            <p>5.grid<br>（自適應,要考慮兼容性）</p>
        </article>
    </section>

    <section class="layout inline-block">
        <article>
            <p>6.inline-block<br>（自適應）</p>
        </article>
    </section>

    <section class="layout margin-auto">
        <article>
            <p>7.absolute + margin-auto<br>(內外容器都要設置寬高) </p>
        </article>
    </section>

    <section class="layout line-height">
        <article>
            <p>8.line-height(只適合單行inline，而且要知道父容器的高度)</p>
        </article>
    </section>

</body>
</html>

【CSS】8種常見的垂直水平居中方法

【git】vscode敲stash相關命令Too many revisions specified

【前端筆記】20191205-火狐瀏覽器a鏈接的href值不同時跳轉跟谷歌的不一致

【js】立即執行的匿名函數的一些寫法

【CSS】8種常見的垂直水平居中方法

【前端筆記】20191203-element-ui樹形控件始終保留選中的結點樣式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結