В IE 11 Не работает display: flex в связке с magin: auto?
.big-photo{
    justify-content: center;
    align-items: center;
}
а вообще, вот css-live.ru/articles-css/shpargalka-po-shpargalke-...
Да, уже все методы попробовал и пришел к решению просто написать на JSmodule.exports = () => {
  let photo = document.querySelector('.js-big-photo');
  if (!photo) return;
  photo.addEventListener('click', bigPhoto);

  function bigPhoto() {
    let photoTitle = document.querySelector('.js-big-photo-title').innerText;
    let photoSubtitle = document.querySelector('.js-big-photo-subtitle').innerText;
    let imgCrc = this.getAttribute('src');
    let mrgnRght = (window.innerWidth) - (document.body.offsetWidth);
    let bigPhotoBlock = document.createElement('div');

    bigPhotoBlock.className = 'big-photo';
    bigPhotoBlock.innerHTML = `<div class="big-photo__box">
                                <img class="big-photo__photo" src="${imgCrc}">
                                <div class="big-photo__title">
                                  ${photoTitle}
                                </div>
                                <div class="big-photo__subtitle">
                                  ${photoSubtitle}
                                </div>
                              </div>`;

    document.body.style.cssText = `overflow: hidden; margin-right: ${mrgnRght}px`;
    document.body.appendChild(bigPhotoBlock);

    let bgPhtHgth = document.querySelector('.big-photo');
    let boxPhoto =  bgPhtHgth.querySelector('.big-photo__box');
    let posTop = (bgPhtHgth.offsetHeight / 2) - (boxPhoto.offsetHeight / 2);
    let posLeft = (bgPhtHgth.offsetWidth / 2) - (boxPhoto.offsetWidth / 2);

    boxPhoto.style.cssText = `top: ${posTop}px; left: ${posLeft}px`;

    bigPhotoBlock.addEventListener('click', () => {
      bigPhotoBlock.parentNode.removeChild(bigPhotoBlock);
      document.body.style.cssText = ``;
    });
  }
};