Я использовал следующие css в разных местах на моем сайте:
http://jsfiddle.net/uycq29mt/1/
.a {
position:absolute;
background:red;
width:600px;
height:100px;
left:50%;
transform: translate(-50%);
}
При запуске в Internet explorer вы увидите горизонтальную полосу прокрутки, которая, как представляется, игнорирует преобразование относительно общей ширины страницы.
Существует простое решение:
http://jsfiddle.net/uycq29mt/2/
.a {
position:absolute;
background:red;
width:600px;
height:100px;
right:50%;
transform: translate(50%);
}
Вместо того, чтобы отправить элемент слева на 50% (вправо) и с помощью преобразования отправить его влево, я делаю прямо противоположное. Я никогда не рассматривал это до сих пор, но если вы поместите элемент в крайнем левом углу, это не повлияет на ширину страницы или полосу прокрутки.
Странно, если вы выполняете вертикальный эквивалент центрирования, используя верхние 50% и переводите (0px, -50%), он, похоже, не влияет на вертикальную полосу прокрутки.
Похоже, что только Internet Explorer не пересчитывает горизонтальные границы, когда преобразования используются таким образом. Довольно раздражает. IE отстой.