CSS 常用佈局實現方式

1. 左右布局
2. 左中右布局
3. 水平居中
4. 垂直居中

左右佈局

方法一：flex

簡單來說：Flex 包括外容器及內元件。

.container{
   display:flex; /*一開始需要在父層宣告為 flex 才有效*/
}
​
.item-right{
   flex:1; /*對應子層加上；1數值是內元件之間佔的比例*/
}
​
.item-left{
   flex:1; /*對應子層加上*/
}
<div class="container">
    <div class="item-right"></div>
    <div class="item-left"></div>
</div>

額外知識點：flex 外內還包含其他屬性實現不同效果
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

方法二：float

設定兩個需要佈局的元素寬度為父容器的總和，再使用float脫離文檔流。

.clearfix{
   content:'';
   display:block;
   clear:both;
}
​
.item-left{
   float:left; /*使用float脫離文檔流*/
}
​
.item-right{
   float:left; /*或視乎父元素width使用float:right; 或margin-left:.left的闊度*/
}
<div class="clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

方法三：position:absolute

.container{
 position:relative; /*父元素加上relative*/
}
​
.right{
 position:absolute; /*使用absolute脫離文檔流*/
}
​
.left{
 position:absolute; /*使用absolute脫離文檔流*/
 left:200px; /*定位.right闊度*/
}
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

左中右布局

方法一：flex

.container{
 display:flex;
}
​
.item-right, .item-center, .item-left{
 flex:1;
}
<div class="container">
 <div class="item-right"></div>
 <div class="item-center"></div>
 <div class="item-left"></div>
</div>

方法二：float

設定三個需要佈局的元素寬度為父容器的總和，再使用float脫離文檔流。

.container{
  content:'';
  display:block;
  clear:both;
}
.right, .center, .left{
  float:left;
}
<div class="clearfix">
  <div class="right"></div>
  <div class="center"></div>
  <div class="left"></div>
</div>

方法三：position:absolute:

.container{
  position:relative; /*父元素加上relative*/
}
.right{
  position:absolute; /*使用absolute脫離文檔流*/
}
.center{
  position:absolute; /*使用absolute脫離文檔流*/
  left:200px; /*定位.right闊度*/
.left{
  position:absolute; /*使用absolute脫離文檔流*/
  left:400px; /*定位.right及.center闊度*/
}
<div class="container">
  <div class="right"></div>
  <div class="center"></div>
  <div class="left"></div>
</div>

水平居中

margin: 0 auto;

多用於block元素，設定block元素的 width 屬性，可以避免該元素從左到右撐滿容器，然後你可以設定左右外邊距（margin-left 與 margin-right）為 auto 來使其水平居中。元素在顯示的時候，只會顯示到你所指定的寬度，然後剩餘的寬度平均的散落在左右兩邊的邊距上。

額外知識點：16种方法实现水平居中垂直居中
http://louiszhai.github.io/2016/03/12/css-center/

垂直居中

line-height

.container{
  width:200px;
  height:150px;
  border:1px solid #000000;
  line-height:150px;
  text-align:center;
}
.content{
  display:inline-block;
  width:10px;
  height:10px;
  background:#0536ff;
}
<div class="container">
  <div class="content"></div>
</div>