css各种布局和居中

1.左右布局：一栏定宽，一栏自适应。

方法：1.float + margin

自适应
/*下面是css部分*/
.left{
  width: 200px;
  background: pink;
  float: left;
  display: block;
  text-align: center;
  line-height: 600px; 
}
.right{
  margin-left: 210px;
  background: skyblue;
  text-align: center;
  line-height: 600px;
}

方法2：使用position：absolute

自适应
/*下面是css部分*/

.left{
  width: 200px;
  background: pink;
  position: absolute;
  top: 9px;
  display: block;
  text-align: center;
  line-height: 400px;
  
}
.right{
  margin-left: 210px;
  display: block;
  background: skyblue;
  text-align: center;
  line-height: 400px;
}

左右布局.png

2.左中右布局：两边定宽，中间自适应。

方法1：左右float，中间用margin撑开。缺点是HTML文档里左右两块写在前，中间块写在后。

右栏
中间栏

.left{
  width: 200px;
  line-height: 400px;
  text-align: center;
  background: skyblue; 
  float: left;    
}
.right{
  width: 150px;
  line-height: 400px;
  text-align: center;
  background: pink;
  float: right;
}
.middle{
  line-height: 400px;
  text-align: center; 
  background: lightgreen; 
  margin-left: 220px; 
  margin-right: 160px;
}

方法2：左右使用position定位，中间用margin撑开

中间栏
右栏

* {margin: 0;text-align: center;}
.left{
  width: 150px;
  line-height: 400px;
  background: skyblue; 
  position: absolute;   
  top: 0;
  left: 0;
}
.middle{
  line-height: 400px;
  background: lightgreen; 
  margin: 0 160px;
}
.right{
  width: 150px;
  line-height: 400px;
  background: pink;
  position: absolute;
  top: 0;
  right: 0;
}

左中右布局.png

方法3：flex布局

中间
右栏
    
 .wrapper{
    display: flex;
    text-align: center;
}
.left{
    width: 200px;
    line-height: 300px;
    background: lightgreen;
}
.middle{
    width: 100%;
    background: pink;
    marign: 0 20px;
}
.right{
    width: 200px;
    line-height: 300px;
    background: skyblue;
}  

三栏flex布局.png

3.水平居中

1.行内元素水平居中，一个属性搞定

.center{
        text-align:center;
}

2.块级元素固定宽度，左右margin设为auto

    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

3.居中的元素设置display:table;然后设置margin: 0 auto.这个和上方法2方法有点类似。

      display:table;
      margin:0 auto;
      border:1px solid;
  }
  
利用table水平居中

4.多个块级元素设置inline-block，其父元素设置text-align，这个利用分方法1中的特性

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

      
内部的块元素变成inline-block
      
内部的块元素变成inline-block
  

5.使用flex布局。父元素上设置display: flex;justify-content: center

      display:flex;
      justify-content:center;
  }
  

      
使用flex布局居中
      
使用flex布局居中
  

4.垂直居中

1.单行文本垂直居中

方法1：设置padding-top和padding-bottom值相等
方法2：设置line-height的值等于height

2.多行文本垂直居中，使用display:table ，table-cell和vertical-align： middle

    
      这里是第一行文字。

      这里是第二行文字。
    

div{ display:table; width:550px; height:300px; } span{ display:table-cell; vertical-align:middle; }

3.块级元素flex垂直居中。利用flex布局中的align-items：center

    
块级元素需要垂直居中

.wrap{ display:flex; align-items: center; width:550px; height:300px; border:4px solid #beceeb; color:#069; }

4.使用position+top以及负margin（或者transform或者margin：auto）居中，可以同时在水平方向也居中。

这里包含3种比较相似的方法。

    
这个是要居中的块，长宽已知