如何将一个动态的盒子居中对齐body页面

更新时间：2025-01-18 11:00:25

在我们制作页面的时候经常会需要将盒子进行页面的居中对齐，在固定长度的时候这个问题其实是非常简单的。而当我们的盒子如果是动态的这个时候采用直接定位或者是修改外边距的办法会造成动态变化时的BUG。所以这次记录下来一个方法可以帮助我们将动态盒子进行居中对齐：

position:fixed;//将盒子设置为固定定位top:0;left:50%;//将盒子left设置为50%webkit-transform:translate(-50%);//兼容旧版谷歌浏览器transform:translate(-50%);//将盒子向左移动自身宽度的50%

其中在设置left位置后，我们会发现，居中的其实是我们盒子的最左面，整体的盒子并未进行居中，所以我们将整体盒子向左移动自身宽度的50%

这时候可能有人问了“为什么不设置，'margin:0auto'呢？”,这个是因为我们将盒子设置为固定定位为后我们动态盒子的的父盒子就不是我们的body标签了，所以使用margin是属于无效应用。