css实现多种常见布局

1. 水平居中
   1. 定宽的块级元素

      .out {
      }
      .in {
          margin: 0 auto;
      }

   2. 不定宽的块级元素（一个div里面多个div要居中）
   1. 里面元素设置为内联元素，父元素使用text-align：center；

      .out {
          text-align: center;
      }
      .in {
          display: inline-block; 
      }

   2. 使用flex布局

      .out {
          display: flex;
          justify-content:center;
      }
      .in {
      }

   3. 给多个div加一个container

      .out {
          position: relative;
      }
      .container {
          position: absolute;
          left:50%;
          transform: translate(-50%,0) 
      }
      .in {
          float: left;
      }

   3. 内联元素居中

      .out {
          text-align:center;
      }

2. 垂直居中
   1. 块级元素垂直居中，知道高度

      .out {
      }
      .in {
          margin-top: 75px;
      }

      .out {
          box-sizing: border-box;
          padding-top: 75px;
      }
      .in {
      }

   2. 块级元素垂直居中，不知道高度

      .out {
          position: relative;
      }
      .in {
          position: absolute;
          top: 50%;
          transform: translate(0,-50%);
      }

      /*使用flex布局*/
      .out {
          display: flex;
          align-items: center;
      }
      .in {
      }

   3. 内联元素垂直居中

      .out {
      }
      .in {
          line-height: 20px;
      }

       

3. 水平垂直居中

   1. 知道高度

      .out {
      }
      .in {
          margin: 50px auto;
      }//同理也可以设置padding

      //使用定位实现
      .out {
          position: relative;
      }
      .in {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -50px;
          margin-top: -50px;
      }

   2. 不知道高度

      //定位结合transfrom属性
      .out {
          position: relative;
      }
      .in {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
      }

      //使用flex布局
      .out {
          display: flex;
          justify-content: center;
          align-items: center;
      }
      .in {
      }

4. 两列布局（左边固定右边自适应）
   

   1. 利用浮动和margin

      .left {
          float: left;
          width: 200px;
      }
      .right {
          margin-left: 200px;
      }

   2. 浮动+overflow属性（值无所谓，触发bfc）

      .left {
          float: left;
          width: 200px;
      }
      .right {
          overflow: auto;
      }

   3. flex布局

      .container {
          display: flex;
      }
      .left {
          width: 200px;
      }
      .right {
          flex: 1;
      }

       

5. 三列布局（两边固定，中间自适应）
   1. 双飞翼布局（margin空出位置）

      .middle {
          width: 100%;
          float: left;
          box-sizing: border-box;}
       /*使文字不被遮挡*/.middle .container {　　 margin:0 200px;}
      .left {
          width: 200px;
          float: left;
          /*调整负边距回到应在的位置*/
          margin-left: -100%;
      }
      .right {
          width: 200px;
          float: left;
          margin-left: -200px;
      }    

      注意**：所有div都要浮动，并且middle必须写在前面
      

   2. 圣杯布局（padding空出位置）

      .middle {
          width: 100%;
          float: left;
          padding: 0 200px 0 200px;
          box-sizing: border-box;
      }
      .left {
          width: 200px;
          float: left;
          margin-left: -100%;
      }
      .right {
          width: 200px;
          float: left;
          margin-left: -200px;
      }

   3. flex布局

      .middle {
          flex: 1;
      }
      .left {
          width: 200px;
      }
      .right {
          width: 200px;
      }

      注意**：需要按照left,middle,right的顺序写

   4. 只利用浮动来写

      .middle {
          width: 100%;
      }
      .left {
          width: 200px;
          float: left; 
      }
      .right {
          width: 200px;
          float: right;
      }

      注意**：书写方式left，right，middle；文字会避开浮动模块，不需要过多处理了

   5. 利用绝对定位，脱离文档流

      .middle {
          width: 100%;
      }
      .left {
          width: 200px;
          position: absolute;
          left: 0;
          top: 0;
      }
      .right {
          width: 200px;
          position: absolute;
          right: 0;
          top: 0;
      }

       

来源：https://www.cnblogs.com/longlongdan/p/10532891.html