[分享]css中屏幕放大内容会往左边

在CSS中，我们经常会遇到屏幕放大内容会往左边的问题。这个问题一般出现在我们设置了一个固定的宽度，并使用了 margin: 0 auto; 来水平居中元素时。 .container { width: ...

在CSS中，我们经常会遇到屏幕放大内容会往左边的问题。这个问题一般出现在我们设置了一个固定的宽度，并使用了 margin: 0 auto; 来水平居中元素时。

 .container {
    width: 1000px;
    margin: 0 auto;
  } 

当我们在浏览器中放大页面时，我们会发现元素的位置出现了偏移，显示在了浏览器的左侧。

这是因为，margin: 0 auto; 属性实际上是通过计算左右两侧的空白来将元素水平居中的。当屏幕放大时，由于浏览器窗口的宽度变大了，而元素的宽度没有改变，所以元素的左右两侧的空白就会变大，从而导致元素的位置向左偏移。

解决这个问题的方法是，我们可以将元素的 margin-left 和 margin-right 设置为 auto，同时将元素的 position 属性设置为 relative 或 absolute，再将元素的左右两侧的位置分别设置为 0 和 0。代码如下：

 .container {
    width: 1000px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  } 

这样，我们在放大页面时，元素的位置就能够正常保持居中了。