1.左右布局：一欄定寬，一欄自適應(yīng)。

方法：1.float + margin

<div class="right">自適應(yīng)</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">自適應(yīng)</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.左中右布局：兩邊定寬，中間自適應(yīng)。

方法1：左右float，中間用margin撐開(kāi)。缺點(diǎn)是HTML文檔里左右兩塊寫(xiě)在前，中間塊寫(xiě)在后。

<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撐開(kāi)

<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.行內(nèi)元素水平居中，一個(gè)屬性搞定

.center{
        text-align:center;
}

2.塊級(jí)元素固定寬度，左右margin設(shè)為auto

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

3.居中的元素設(shè)置display:table;然后設(shè)置margin: 0 auto.這個(gè)和上方法2方法有點(diǎn)類(lèi)似。

      display:table;
      margin:0 auto;
      border:1px solid;
  }
  <div class="t">利用table水平居中</div>

4.多個(gè)塊級(jí)元素設(shè)置inline-block，其父元素設(shè)置text-align，這個(gè)利用分方法1中的特性

      text-align:center;
  }
  .inner{
      display:inline-block;
  }
  <div class="wrap">
      <div class="inner">內(nèi)部的塊元素變成inline-block</div>
      <div class="inner">內(nèi)部的塊元素變成inline-block</div>
  </div>

5.使用flex布局。父元素上設(shè)置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：設(shè)置padding-top和padding-bottom值相等
方法2：設(shè)置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.塊級(jí)元素flex垂直居中。利用flex布局中的align-items：center

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

4.使用position+top以及負(fù)margin（或者transform或者margin：auto）居中，可以同時(shí)在水平方向也居中。

這里包含3種比較相似的方法。

    <div class="son">這個(gè)是要居中的塊，長(zhǎng)寬已知</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.負(fù)margin使用需要知道居中元素的尺寸，這里垂直和水平都居中
  top: 50%;
  left: 50%;
  margin-left: -60px; 
  margin-top: -60px; 
  //方法2.使用transform,不需要知道居中元素的尺寸，這里垂直和水平都居中
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  //方法3：可以對(duì)固定尺寸或圖片這種自身包含尺寸的元素使用，這里垂直和水平都居中
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}