css響應式布局彙總(一)——居中布局

   一、居中布局的實作(父元素和子元素不定寬高)

1、水準居中布局的解決方案

1）inline-block + text-align

<style>
      .container {
        text-align: center;
      }
      .cell {
        display: inline-block;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>
           

2)table + margin

<style>
      .cell {
        display: table;
        margin:0 auto;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>
           

3）absloute + transform

<style>
      .container{
        position:relative;
      }
      .cell {
        position:absolute;
        left:50%;
        transform:translateX(-50%);
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>
           

4）flex + justify-content

<style>
      .container{
        display:flex;
        justify-content: center;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>
           

5)flex + margin

<style>
      .container{
        display: flex;
      }
      .cell{
        margin:0 auto;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>
           

2、垂直居中布局的解決方案

1)table-cell + vertical-align

<style>
      .container{
        display:table-cell;
        verticl-align:miidle
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>
           

2)absolute+transform

<style>
      .container{
        position:relative;
      }
      .cell {
        position:absolute;
        top:50%;
        transform:translateY(-50%);
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>
           

3)flex+align-items

<style>
      .container{
        display:flex;
        align-items: center;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>
           

3、居中布局的解決方案

1)inline-block + text-align + table-cell+vertical-align

<style>
      .container {
        display:table-cell
        text-align: center;
      }
      .cell {
        display: inline-block;
        vertical-align:middle;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>
           

2)absolute + transform

<style>
      .container{
        position:relative;
      }
      .cell {
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>
           

3)flex + justify-content +align-items

<style>
      .container{
        display:flex;
        align-items: center;
        justify-content:center;
      }
    </style>


    <div class="container">
      <div class="cell"></div>
    </div>