定位居中用transform:translate导致浏览器出现滚动条

Question

<style>
  div {
    width: 95vw ;
    height: 200px;
    background-color: red;
    position: absolute;
    left:50%;
    transform: translateX(-50%);
  }
</style>
<div></div>

在ie的时候会因为width过长而出现横向滚动条，该怎么处理这个滚动条

Answer 1

如果你只是通过absolute想来局中的话..你甚至可以不用transform:

.class {
    position: absolute;
    left: 0;
    right: 0;
    width: 95vw;
    margin: auto;
}

让absolute + margin分配剩余空间, 这个方法需要设置宽高.

Answer 2

出现滚动条的可能性只有低版本的ie不识别css3，如果要兼容最好的办法还是用过margin-left:-47vw;但是问题又来了，vw也可能不能正确识别……