css中幾種實作居中樣式技術優缺點程式碼詳解-css教學-PHP中文網

css中幾種實作居中樣式技術優缺點程式碼詳解

伊谢尔伦

發布： 2017-07-20 09:38:38

原創

1534 人瀏覽過

負外邊距(Negative Margins)

這或許是目前最受歡迎的使用方法。如果區塊元素尺寸已知，可以透過以下方式讓內容區塊居中於容器顯示：

外邊距margin取負數，大小為width/height（不使用box-sizing: border-box時包含padding，）的一半，再加上top: 50%; left: 50%;。即：

.is-Negative {  
        width: 300px;  
        height: 200px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -170px; /* (width + padding)/2 */  
        margin-top: -120px; /* (height + padding)/2 */  
}

登入後複製

測試表明，這是唯一在IE6-IE7上也表現良好的方法。

優點：

1. 良好的跨瀏覽器特性，相容於IE6-IE7。

2. 程式碼量較少。

缺點：

1. 無法適應。不支援百分比尺寸和min-/max-屬性設定。

2. 內容物可能溢出容器。

3. 邊距大小與padding,和是否定義box-sizing: border-box有關，計算需依不同情況。

變形（Transforms）

這是最簡單的方法，不近能實現絕對居中同樣的效果，也支援聯合可變高度方式使用。內容區塊定義transform: translate(-50%,-50%)必須帶上瀏覽器廠商的前綴，還要加上

top: 50%; left: 50%;

程式碼類別：

.is-Transformed {   
  width: 50%;  
  margin: auto;  
  position: absolute;  
  top: 50%; left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
}

登入後複製

優點：

##1. 內容可變高度

2. 程式碼量少

#1 。渲染模糊的現象

進一步了解transform實作居中的知識可以參考CSS-Tricks的文章《Centering PercentageWidth/Height Elements》

##表格單元格（Table-Cell）

總的說來這可能是最好的居中實作方法，因為內容區塊高度會隨著實際內容的高度變化，瀏覽器對此的相容性也好。最大的缺點是需要大量的額外標記，需要三層元素讓最內層的元素居中。

HTML：

<div class="Center-Container is-Table">  
  <div class="Table-Cell">  
    <div class="Center-Block">  
    <!-- CONTENT -->  
    </div>  
  </div>  
</div>

登入後複製

CSS：

.Center-Container.is-Table { display: table; }  
.is-Table .Table-Cell {  
  display: table-cell;  
  vertical-align: middle;  
}  
.is-Table .Center-Block {  
  width: 50%;  
  margin: 0 auto;  
}

登入後複製

優點：

1. 高度變化

2. 內容溢出將父元素撐開。

3. 跨瀏覽器相容性佳。

缺點：

需要額外html標記

十二、行內區塊元素（Inline-Block）

#很受歡迎的一種居中實作方式，基本概念是使用display: inline-block, vertical-align: middle和一個偽元素讓內容區塊處於容器中央。

如果內容區塊寬度大於容器寬度，例如放了一個很長的文本，但內容區塊寬度設定最大不能超過容器的100%減去0.25em，否則使用偽元素:after內容區塊會被擠到容器頂部，使用:before內容塊會向下偏移100%。

如果你的內容區塊需要佔據盡可能多的水平空間，可以使用max-width: 99%;（針對較大的容器）或max-width: calc(100% -0.25em)（取決於支援的瀏覽器和容器寬度）。

HTML：

<div class="Center-Container is-Inline">  
  <div class="Center-Block">  
    <!-- CONTENT -->  
  </div>  
</div>

登入後複製

CSS：

.Center-Container.is-Inline {   
  text-align: center;  
  overflow: auto;  
}  
  
.Center-Container.is-Inline:after,  
.is-Inline .Center-Block {  
  display: inline-block;  
  vertical-align: middle;  
}  
  
.Center-Container.is-Inline:after {  
  content: &#39;&#39;;  
  height: 100%;  
  margin-left: -0.25em; /* To offset spacing. May vary by font */  
}  
  
.is-Inline .Center-Block {  
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */   
}

登入後複製

這種方法的優劣和單元格Table-Cell方式差不多，起初我把這種方式忽略掉了，因為這確實是一種hack方法。不過，無論如何，這是很流行的一種用法，瀏覽器支援的也很好。

優點：

1. 高度變化

#2. 內容溢位將父元素撐開。

3. 支援跨瀏覽器，也適應IE7。

缺點：

1.需要一個容器

2.水平居中依賴margin-left: -0.25em;該尺寸對於不同的字體/字號需要調整。

3.內容區塊寬度不能超過容器的100% - 0.25em。

Flexbox

這是CSS佈局未來的趨勢。 Flexbox是css3新增屬性，設計初衷是為了解決像垂直居中這樣的常見佈局問題。