記錄--居中為什麼要使用 transform？

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

引言

居中是我們在前端佈局中經常會遇到的問題，其中包括水平居中和垂直居中。居中的方法很多，比如說水平居中可以使用text-align: center或者margin: 0 auto等等來實現，垂直居中則需要使用一些其它的特殊的技巧。比如說常見的做法是使用transform來實現垂直居中，margin-top或者top屬性，或者使用彈性佈局。

transform的優點

那麼我們為什麼要使用transform來實現垂直居中呢？

因為transform屬於合成屬性，而margin-top和top屬於佈局屬性。對於合成屬性，瀏覽器會將被動畫元素放入一個獨立的層中進行動畫，而不會對整個頁面進行重繪，這可以提高頁面的性能。而對於佈局屬性，任何一點的變化都可能導致整個頁面的重排和重繪，這會對頁面的性能產生很大的影響。

如果我們使用margin-top或者top來實現垂直居中，那麼每次元素髮生變化時，瀏覽器都會對整個頁面進行重排和重繪，這會導致頁面的性能受到很大的影響。而使用transform來實現垂直居中，則可以將元素放入一個獨立的層中進行動畫，避免了對整個頁面的重排和重繪，從而提高了頁面的性能。

下麵是一個使用transform實現垂直居中的示例代碼：

<div class="container">  
  <div class="box">  
    <p>這是一段文字</p>  
  </div>  
</div> 

.container {  
  position: relative;  
  height: 300px;  
  background-color: #eee;  
}  
   
.box {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
}  
 

在上面的代碼中，我們首先將外層容器設置為position: relative，並指定了一個固定的高度。然後，我們將內層元素設置為position: absolute，並使用top: 50%和left: 50%將其定位到父元素的中心位置。最後，我們使用transform: translate(-50%, -50%)來將元素向左上方移動自身寬度和高度的一半，從而實現了垂直居中的效果。

使用transform來實現垂直居中可以避免對整個頁面的重排和重繪，從而提高頁面的性能。所以在實際的開發中，我們應該儘可能地使用合成屬性來進行動畫和佈局，避免使用佈局屬性，從而提高頁面的性能和用戶體驗。

浮動

對於浮動居中，它在進行元素的水平居中時，可能會對頁面進行重排。這是因為瀏覽器需要對元素的左右外邊距進行計算，並將元素放置在父容器中間。這個過程會導致瀏覽器對整個頁面進行重排，從而可能影響頁面的性能。此外，浮動佈局實現多列佈局，可能會導致多列高度不一致，需要進行額外處理。

但是，在某些情況下，浮動居中並不會對頁面進行重排。例如，如果我們將元素的寬度設置為固定的像素值，那麼瀏覽器就可以很容易地計算出元素的左右外邊距，並將元素放置在父容器中間，而不需要對整個頁面進行重排。在這種情況下，浮動居中的性能表現可能會比較好。

所以說浮動居中可能會對頁面進行重排，但在某些情況下，它的性能表現可能會比較好。在實際開發中，我們則應該根據具體的需求和情況來選擇。

彈性

彈性佈局大家應該也比較熟悉了，用彈性只有一次和無數次，在很多時候使用彈性佈局真的很舒服，所以我們關於彈性佈局就多描述一些。

彈性佈局的優點在於它可以方便地實現彈性盒子容器中彈性盒子項目的伸縮和排列，但是在使用彈性佈局時，如果頻繁修改彈性容器的屬性或彈性項目的排列順序，就可能會觸發頁面重排和重繪，從而影響頁面的性能和用戶體驗。

導致原因

具體來說，以下幾種情況可能會導致彈性佈局的頁面重排和重繪：

1. 修改彈性容器的屬性

如果修改彈性容器的屬性，如flex-direction、justify-content、align-items等，會影響彈性盒子項目的排列和佈局，從而導致頁面重排和重繪。

2. 修改彈性項目的屬性

如果修改彈性項目的屬性，如flex-grow、flex-shrink、flex-basis等，會影響彈性盒子項目的伸縮和尺寸，從而導致頁面重排和重繪。

3. 修改彈性項目的順序

如果修改彈性項目的排列順序，會影響彈性盒子項目的排列和佈局，從而導致頁面重排和重繪。

優化

以為了避免彈性佈局的頁面重排和重繪，我們可以採取一些優化措施，如：

1. 儘可能減少修改彈性容器和彈性項目的屬性和順序。

2. 將多個彈性容器和彈性項目儘可能合併為一個彈性容器和彈性項目，從而減少頁面重排和重繪。

3. 將彈性容器和彈性項目的尺寸設置為固定值，從而減少頁面重排和重繪。

所以說，雖然彈性佈局具有靈活和方便的優點，寫起來很舒服，但是在使用時我們需要註意優化，減少頁面重排和重繪，以提高頁面的性能和用戶體驗。

本文轉載於:

https://juejin.cn/post/7303587697100013606

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。