В IE 11 Не работает display: flex в связке с magin: auto?

Question

[Serdji]

Друзья, проблема такая, есть картинка при клики на которою она открывается по середине на весь экран с затемненным фоном, в общем стандартная фишка. Я решил применить к основному блоку display: flex, а к блоку с картинкой magin: auto, работает везде, кроме 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;
}

Comments

[Михаил Чирский]

Открыл ваш пример в хроме, тоже не по центру) может проблема не в ИЕ 11 ?)

Answer 1

[Павел Гришин]

.big-photo{
justify-content: center;
align-items: center;
}

а вообще, вот css-live.ru/articles-css/shpargalka-po-shpargalke-...

Comments

[Сергей Р]

.big-photo { justify-content: center; align-items: center; }
В ie11 - работает, в ie10 - частично работает, в ie9 - не работает

Answer 2

[devstudent]

caniuse.com/#search=flex
частичная поддержка flex в IE 11

Answer 3

[fetis26]

У ИЕ плохо маржины с флексбоксом работают. Я бы их с осторожностью использовал для центрирования. Лучше явное выравнивание

Answer 4

[Serdji]

Да, уже все методы попробовал и пришел к решению просто написать на 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 = ``;
    });
  }
};