css各种布局和居中

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

方法：1.float + margin

<div class="right">自适应</div>
/*下面是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

<div class="right">自适应</div>
/*下面是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文档里左右两块写在前，中间块写在后。

<div class="right">右栏</div>
<div class="middle">中间栏</div>

.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撑开

<div class="middle">中间栏</div>
<div class="right">右栏</div>

* {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布局

<div class="middle">中间</div>
<div class="right">右栏</div>
    
 .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;
  }
  <div class="t">利用table水平居中</div>

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

      text-align:center;
  }
  .inner{
      display:inline-block;
  }
  <div class="wrap">
      <div class="inner">内部的块元素变成inline-block</div>
      <div class="inner">内部的块元素变成inline-block</div>
  </div>

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

      display:flex;
      justify-content:center;
  }
  <div class="father">
      <div class="son">使用flex布局居中</div>
      <div class="son">使用flex布局居中</div>
  </div>

4.垂直居中

1.单行文本垂直居中

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

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

    <span>
      这里是第一行文字。<br>
      这里是第二行文字。
    </span>
</div>
  
div{
  display:table; 
  width:550px; 
  height:300px; 
}
span{
  display:table-cell; 
  vertical-align:middle;
}

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

    <div>块级元素需要垂直居中</div>
</div>
  
.wrap{
  display:flex; 
  align-items: center;
  width:550px; 
  height:300px; 
  border:4px solid #beceeb; 
  color:#069; 
}

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

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

    <div class="son">这个是要居中的块，长宽已知</div>
</div>
/*以下部分是css*/
.parent {
  width: 400px;
  height: 400px;
  position: relative; //也可以是absolute或fixed
  border: 2px solid;
}
.son {
  width:120px;
  height: 120px;
  border: 2px dashed;
  position: absolute;
  //方法1.负margin使用需要知道居中元素的尺寸，这里垂直和水平都居中
  top: 50%;
  left: 50%;
  margin-left: -60px; 
  margin-top: -60px; 
  //方法2.使用transform,不需要知道居中元素的尺寸，这里垂直和水平都居中
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  //方法3：可以对固定尺寸或图片这种自身包含尺寸的元素使用，这里垂直和水平都居中
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}