记录--居中为什么要使用 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来实现垂直居中可以避免对整个页面的重排和重绘，从而提高页面的性能。所以在实际的开发中，我们应该尽可能地使用合成属性来进行动画和布局，避免使用布局属性，从而提高页面的性能和用户体验。

浮动

对于浮动居中，它在进行元素的水平居中时，可能会对页面进行重排。这是因为浏览器需要对元素的左右外边距进行计算，并将元素放置在父容器中间。这个过程会导致浏览器对整个页面进行重排，从而可能影响页面的性能。此外，浮动布局实现多列布局，可能会导致多列高度不一致，需要进行额外处理。

但是，在某些情况下，浮动居中并不会对页面进行重排。例如，如果我们将元素的宽度设置为固定的像素值，那么浏览器就可以很容易地计算出元素的左右外边距，并将元素放置在父容器中间，而不需要对整个页面进行重排。在这种情况下，浮动居中的性能表现可能会比较好。

所以说浮动居中可能会对页面进行重排，但在某些情况下，它的性能表现可能会比较好。在实际开发中，我们则应该根据具体的需求和情况来选择。

弹性

弹性布局大家应该也比较熟悉了，用弹性只有一次和无数次，在很多时候使用弹性布局真的很舒服，所以我们关于弹性布局就多描述一些。

弹性布局的优点在于它可以方便地实现弹性盒子容器中弹性盒子项目的伸缩和排列，但是在使用弹性布局时，如果频繁修改弹性容器的属性或弹性项目的排列顺序，就可能会触发页面重排和重绘，从而影响页面的性能和用户体验。

导致原因

具体来说，以下几种情况可能会导致弹性布局的页面重排和重绘：

修改弹性容器的属性

如果修改弹性容器的属性，如flex-direction、justify-content、align-items等，会影响弹性盒子项目的排列和布局，从而导致页面重排和重绘。

修改弹性项目的属性

如果修改弹性项目的属性，如flex-grow、flex-shrink、flex-basis等，会影响弹性盒子项目的伸缩和尺寸，从而导致页面重排和重绘。

修改弹性项目的顺序

如果修改弹性项目的排列顺序，会影响弹性盒子项目的排列和布局，从而导致页面重排和重绘。

优化

以为了避免弹性布局的页面重排和重绘，我们可以采取一些优化措施，如：

尽可能减少修改弹性容器和弹性项目的属性和顺序。
将多个弹性容器和弹性项目尽可能合并为一个弹性容器和弹性项目，从而减少页面重排和重绘。
将弹性容器和弹性项目的尺寸设置为固定值，从而减少页面重排和重绘。

所以说，虽然弹性布局具有灵活和方便的优点，写起来很舒服，但是在使用时我们需要注意优化，减少页面重排和重绘，以提高页面的性能和用户体验。

本文转载于:

https://juejin.cn/post/7303587697100013606

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。