css 居中布局方案

position（transform css3  有些浏览器不兼容）

<article id="one">
  <section id="section"></section>
</article>

  <style>
    #one {
      position: relative;  //此处不设置的话  会一直往上找 找到body
      width: 300px;
      height: 300px;
      background: lightskyblue;
    }
      #section {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 100px;
        background: aliceblue;
        transform: translate(-50%, -50%);
      }
  </style>

2.margin-top（需要知道具体尺寸计算）

<article id="one">
  <section id="section"></section>
</article>

  <style>
    #one {
      position: relative;
      width: 300px;
      height: 300px;
      background: lightskyblue;
    }
    #section {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100px;
      height: 100px;
      margin-left: -50px; // 需要通过 计算  但是兼容性好
      margin-top: -50px;
      background: aliceblue;
    }
  </style>

3.flex（简单，兼容问题）

<article id="one">
  <section id="section"></section>
</article>

  <style>
    #one {
      display: flex;
      width: 300px;
      height: 300px;
      background: lightskyblue;
      justify-content: center;
      align-items: center;
    }
    #section {
      width: 100px;
      height: 100px;
      background: aliceblue;
    }
  </style>

4.gred

<article id="one">
  <section id="section"></section>
</article>  

<style>
    #one {
      display: grid;  //和flex就一点不同   ？？？？
      width: 300px;
      height: 300px;
      background: lightskyblue;
      justify-content: center;
      align-items: center;
    }
    #section {
      width: 100px;
      height: 100px;
      background: aliceblue;
    }
  </style>

 

来源：https://www.cnblogs.com/-constructor/p/12296203.html