In IE 11 display: flex doesn't work in conjunction with magn: auto?

Question

css

Friends, the problem is this, there is a picture when you click on which it opens in the middle to full screen with a darkened background, in general, a standard feature. I decided to apply display: flex to the main block, and magn: auto to the image block, it works everywhere except IE 11 (((

<div class="big-photo">
  <div class="big-photo__box">
    <img class="big-photo__photo" src="http://placehold.it/900X468">
    <div class="big-photo__title">
      Название фото
    </div>
  </div>
</div>

.big-photo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    font-family: 'Open Sans',sans-serif;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

.big-photo__box {
    margin: auto;
}

Answer 1

.big-photo{
justify-content: center;
align-items: center;
}
but in general, here is css-live.ru/articles-css/shpargalka-po-shpargalke-...

Answer 2

caniuse.com/#search=flex
partial support for flex in IE 11

Answer 3

IE does not have good margins with flexbox. I would use them with caution for centering. Better explicit alignment

Answer 4

Yes, I have already tried all the methods and came to the decision to simply write in JS

module.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 = ``;
    });
  }
};