CSS佈局&居中方式&CSS小技巧

阿新 • • 發佈：2019-01-01

一.CSS基本佈局

1.固定寬度佈局

1.1. 一列水平居中佈局
一列的寬度固定為已知值，使用margin設定來達到水平居中效果。
html程式碼：

<!DOCTYPE html>
<html>
<head>
    <title>一列水平居中佈局</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="one-center-col">一列布局</div>
</body 
>
</html>

CSS程式碼:

<style>
    .one-center-col {
          width: 1000px;
          height: 700px;
          background-color: yellow;
          margin: 0 auto;
    }
</style>

效果截圖：

一列布局
其中對於寬度固定的元素，只需要設定該元素的CSS樣式（margin:0 auto;）就可以實現該元素在其父元素的寬度下水平居中對齊顯示。

1.2兩列布局（浮動）
網頁佈局常見左右兩列布局，如果已知左右兩列的寬度是固定值，則可以使用FLOAT浮動

方式完成基本佈局排版。
HTML程式碼

    <div class="container">
        <div class="leftbox">左側列</div>
        <div class="rightbox">右側列</div>
    </div>

CSS程式碼

.leftbox {
  width: 300px;
  height: 100%;
  background-color: #aadddd;
  float: left;
}     
.rightbox {
  width: 700px; 

  height: 100%;
  background-color: #f08844;
  float: right;
}

效果截圖：

在這裡插入圖片描述
兩列布局，當已知列的寬度時，可以使用浮動屬性來大道左右佈局的效果，僅需設定float:left和float:right就可以輕鬆達到頁面佈局效果。

1.3三列布局

三列水平
佈局，如果列的寬度都是固定的，實現方式與上面兩列布局相似，使用浮動即可達到效果。
html程式碼：

<body>
    <div class="container">
        <div class="leftbox">左側列</div>
        <div class="midbox">中間列</div>
        <div class="rightbox">右側列</div>
    </div>

css程式碼：

.container {
  width: 1100px;
  height: 700px;
}
.leftbox {
  width: 300px;
  height: 100%;
  float: left;
  background-color: #ABDDDE;
}
.midbox {
  width: 400px;
  height: 100%;      
  float: left;
  background-color: #F18747;
}
.rightbox {
  width: 300px;
  height: 100%;
  float: right;
  background-color: #AB11DD;
}

效果截圖：
在這裡插入圖片描述
leftbox和midbox設定左浮動，rightbox設定右浮動。但關鍵的是，三個子元素的總寬度不能大於或者等於父元素的寬度。

2.自適應寬度佈局

兩列布局（實現效果：兩列自適應寬度）
思路：實現自適應兩列布局，可以繼續使用浮動方式來佈局，但在設定浮動元素的寬度時，不再使用固定值，而要使用百分比，從而實現寬度的自適應。
兩列布局（實現效果：左側為固定寬度，右側自適應）
1）使用浮動來進行自適應佈局

.leftbox {
    width: 300px;
    height: 100%;
    background-color: #aadddd;
    float: left;
}
.rightbox {
    height: 100%;
    margin-left: 300px;
    background-color: #f08844;
}

基本思路分析：
1.左側設定固定寬度並設定浮動float:left;
2.右側不設定寬度，只設置左側邊距為左側欄的寬度加上左側與右側的間距margin-left
2）使用定位來進行佈局：

.container {
  width: 1000px;
  height: 700px;
  margin: 0 auto;
  position: relative;
}
.leftbox {
  width: 300px;  /*左側固定寬度值*/
  height: 100%;
  position: absolute;
}
.rightbox {
  height: 100%;
  margin-left: 300px; /*邊距值=左側固定寬度值*/
  position: relative;
}

基本思路分析：
1.父元素設定為position:relative;
2.leftbox設定固定寬度，設定為絕對定位position:absolute。
3.rightbox設定為相對定位position:relative。（使其遮蓋左側欄）
4.rightbox設定左邊距，邊距值margin-left剛好為左側欄的寬度。
截圖展示：
在這裡插入圖片描述

三列布局：中間自適應（實現效果：原理類似於兩列布局）
1）使用浮動來佈局
核心思想：中間列自適應。

.leftbox {
  width: 300px;
  height: 100%;
  background-color: #aadddd;
  float: left;
}      
.midbox {
  margin: 0 300px;
  height: 100%;
  background-color: #aa11dd;
}
.rightbox {
  width: 300px;
  height: 100%;
  background-color: #f08844;
  float: right;
}

基本思路分析：
1.左側以及右側設定固定寬度，並且分別設定左右浮動。
2.中間欄設定左右邊距，邊距值剛好分別等於左右側欄的寬度。

2）使用定位來佈局

.container {
    width: 1000px;
    height: 700px;
    margin: 0 auto;
    position: relative;
}
.leftbox {
    width: 300px;
    height: 100%;
    position: absolute;
    left: 0;
}
.midbox {
    margin: 0 300px;
    height: 100%;
    position: relative;
}
.rightbox {
    width: 300px;
    height: 100%;
    position: absolute;
    right: 0;
}

思路分析：
1.父元素設定position:relative;
2.leftbox和rightbox設定position:absolute;並且設定左右側欄的寬度值。
3.midbox設定position:relative;
4.midbox設定左右margin值，正好對應左右側欄的寬度值（margin=leftboxWidth/rightboxWidth）。

截圖展示：
在這裡插入圖片描述

二.CSS居中方式

1.水平居中

1.1 內聯元素水平居中

利用text-align:center可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素（inline），內聯塊（inline-table），inline-flex元素水平居中都有效。
核心程式碼：

.center-text {
    text-align: center;
 }

1.2塊級元素水平居中

通過把固定寬度塊級元素的margin-left和margin-right設成auto，就可以使塊級元素水平居中。
核心程式碼：

.center-block {
  margin: 0 auto;
}

1.3 多塊級元素水平居中

1.3.1 利用inline-block

如果一行中有兩個或兩個以上的塊級元素，通過設定塊級元素的顯示型別為inline-block和父容器的text-align屬性從而使多塊級元素水平居中。
核心程式碼：

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

1.3.2 利用display:flex

利用彈性佈局（flex），實現水平居中，其中justify-content用於設定彈性盒子元素在主軸（橫軸）方向上的對齊方式，本例中設定子元素水平居中顯示。
核心程式碼：

.flex-center {
    display: flex;
    justify-content: center;
}

2. 垂直居中

2.1單行內聯（inline）元素垂直居中

通過設定內聯元素的高度和行高相等，從而使元素垂直居中。
核心程式碼：

#v-box {
    height: 120px;
    line-height: 120px;
}

2.2 多行元素垂直居中

2.2.1 利用表佈局（table）

利用表佈局的vertical-align:middle可以實現子元素的c垂直居中。
核心程式碼：

.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

2.2.2 利用flex佈局

利用flex佈局實現垂直居中，其中flex-direction:column定義主軸方向為縱向。
核心程式碼：

.center-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

2.2.3 利用“精靈元素”

利用“精靈元素”（ghost element）技術實現垂直居中，即在父容器內放一個100%高度的偽元素，讓文字和偽元素垂直對齊，從而達到垂直居中的目的。
核心程式碼：

.ghost-center {
    position: relative;
}
.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;
    vertical-align: middle;
    width: 20rem;
}

2.3 塊級元素垂直居中

2.3.1 固定高度的塊級元素

我們知道居中元素的高度和寬度，垂直居中問題就很簡單。通過絕對定位元素距離頂部50%，並設定margin-top向上偏移元素高度的一般，就可以實現垂直居中了。
核心程式碼：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

2.3.2 未知高度的塊級元素

當垂直居中的元素的高度和寬度未知時，我們可以藉助css3中的transform屬性向Y軸反方向偏移50%的方法實現垂直居中。
核心程式碼：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

3.水平垂直居中

3.1固定寬高元素水平垂直居中

通過margin平移元素整體寬度的一半，使元素水平垂直居中。
核心程式碼：

.parent {
    position: relative;
}
.child {
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
}

3.2未知寬高元素水平垂直居中

利用2D變換，在水平和垂直兩個方向都反方向平移寬高的一般，從而使元素水平垂直居中。
核心程式碼：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3.3 利用flex佈局

利用flex佈局，其中justify-content 用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
核心程式碼：

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

3.4 利用Grid佈局

利用grid實現水平垂直居中，相容性較差。
核心程式碼：

.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}

3.5 螢幕上水平垂直居中

螢幕上水平垂墜居中十分常用，常規的登入及註冊頁面都需要用到。要保證較好的相容性，還需要用到表佈局。
核心程式碼：

/*方法一*/
.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}
/*方法二*/
.element{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

三.css小技巧

1. 圖片寬度的自適應

如何使得較大的圖片，能夠自動適應小容器的寬度？CSS可以這樣寫：

img {max-width: 100%}

2. 3D按鈕

要使按鈕具有3D效果，只要將它的左上部邊框設為淺色，右下部邊框設為深色即可。

 　　div#button {
    　　　　background: #888;
    　　　　border: 1px solid;
    　　　　border-color: #999 #777 #777 #999;
    　　}

3.透明

將一個容器設為透明，可以使用下面的程式碼：

    　　.element {
    　　　　filter:alpha(opacity=50);
    　　　　-moz-opacity:0.5;
    　　　　-khtml-opacity: 0.5;
    　　　　opacity: 0.5;
    　　}

在這四行CSS語句中，第一行是IE專用的，第二行用於Firefox，第三行用於webkit核心的瀏覽器，第四行用於Opera。

4.用圖片替換文字

有時我們需要在標題欄中使用圖片，但是又必須保證搜尋引擎能夠讀到標題，CSS語句可以這樣寫：

    　　h1 {
    　　　　text-indent:-9999px;
    　　　　background:url("h1-image.jpg") no-repeat;
    　　　　width:200px;
    　　　　height:50px;
    　　}

5.固定位置的頁首

當頁面滾動時，有時需頁首在位置固定不變，CSS可以這樣寫：

    　　body{ margin:0;padding:100px 0 0 0;}

    　　div#header{
    　　　　position:absolute;
    　　　　top:0;
    　　　　left:0;
    　　　　width:100%;
    　　　　height:<length>;
    　　}

    　　@media screen{
    　　　　body>div#header{position: fixed;}
    　　}

    　　* html body{overflow:hidden;}

    　　* html div#content{height:100%;overflow:auto;}