兩欄布局

左側(cè)固定寬度右邊自適應(yīng)

負(fù)margin方法：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.left{
    width:200px;
    height:300px;
    margin-right:10px;
    background:red;
    float:left;
}
.right{
    width:100%;
    height:400px;
    float:right;
    margin-right:-210px;
    background:blue;
}
</style>

overflow方法:

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.left{
    width:200px;
    height:300px;
    margin-right:10px;
    background:red;
    float:left;
}
.right{
    height:400px;
    background:blue;
    overflow:hidden;
}
</style>
    

position方法:

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.container{
    position:relative;
}
.left{
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:300px;
    background:red;
}
.right{
    position:absolute;
    top:0;
    left:210px;
    right:0;
    height:400px;
    background:blue;
}
</style>

flex方法:

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
.container{
   display:flex;
}
.left{
    width:200px;
    height:300px;
    background:red;
    margin-right:10px;
}
.right{
    flex:1;
    height:400px;
    background:blue;
}
</style>

三欄布局

margin方法

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>
<style>
.left{
  width:200px;
  height:300px;
  background:red;
  margin:0 10px;
  float:left;
}
.center{
  height:400px;
  background:pink;
  overflow:auto;
}
.right{
  width:200px;
  height:300px;
  background:blue;
  float:right;
  margin:0 10px;
}
</style>

overflow方法

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>
<style>
.left{
  width:200px;
  height:300px;
  background:red;
  margin:0 10px;
  float:left;
}
.center{
  height:400px;
  background:pink;
  overflow:auto;
}
.right{
  width:200px;
  height:300px;
  background:blue;
  float:right;
  margin:0 10px;
}
</style>

position方法

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  
</div>
<style>
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.container{
  position:relative;
}
.left{
  width:200px;
  height:300px;
  background:red;
  margin:0 10px;
  position:absolute;
  top:0;
  left:0;
}
.center{
  width:calc(100% - 440px);
  height:400px;
  background:pink;
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
}
.right{
  width:200px;
  height:300px;
  background:blue;
  position:absolute;
  top:0;
  right:0;
  margin:0 10px;
}
</style>

flex方法

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
<style>
*{
  box-sizing:border-box;
  padding:0;
  margin:0;
}
.container{
 display:flex;
}
.left{
  width:200px;
  height:300px;
  background:red;
  margin:0 10px;
  
}
.center{
  height:400px;
  background:pink; 
  flex:1;
}
.right{
  width:200px;
  height:300px;
  background:blue;
  margin:0 10px;
}
</style>

塊級(jí)元素居中

margin方法

.container{
  background:grey;
}
.item{
  width:300px;
  height:200px;
  background:red;
  margin:0 auto;
}

position方法

.container{
  background:grey;
  position:relative;
}
.item{
  width:300px;
  height:200px;
  background:red;
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%)
}

display:flex

.container{
  background:grey;
  display:flex;   
  justify-content:center;
}
.item{
  width:300px;
  height:200px;
  background:red;
}

text-align:center

.container{
  background:grey;
  text-align:center;
}
.item{
  width:300px;
  height:200px;
  background:red;
  display:inline-block;
}

多行文字水平垂直居中

<section>
  <div class="container">
     <h1 class="title">這是標(biāo)題</h1>
     <p class="content">這是一大段文字內(nèi)容這是一大段文字內(nèi)容這是一大段文字內(nèi)容這是一大段文字內(nèi)容這是一大段文字內(nèi)容這是一大段文字內(nèi)容</p>
  </div>
</section>
<style>
section{
  margin:0 auto;
  width:600px;
}
.container{
  padding:0 100px;
  width:600px;
  height:600px;
  background:grey;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}
</style>

image水平垂直居中

 <div class="container">
   <img src="" alt="圖片">
 </div>
.container{
  width:300px;
  height:300px;
  border:1px solid red;
  text-align:center;
}
.container::after{
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
img{
  vertical-align:middle;
}

瀏覽器固定水平垂直居中

.box{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#ccc;
  text-align:center;
}