Выравнивание модального окна по центру

Мой первый пост.
Центрирование блока относительно другого блока относительно часто-попадающаяся задача, это очередное ее решение. Для меня оно стало самым универсальным и покрывающим все кейсы, с которыми я когда-либо сталкивался.

Формулировка
Центрировать модальное окно по горизонтали и вертикали.

Условия

• Габариты модалки могут быть указаны в любых единицах измерения. Или же могут быть не указаны вовсе.
• Отзывчивость. При ресайзе окна, модалка подстраивается под текущий размер.
• Если модалка сверстана так, что у нее еcть min-height/min-width, то при ресайзе окна до меньших размеров должен появляться скролл.
• IE 9+.
• Позиционирование должны быть реализовано на CSS, без применения JS.

Как это делалось раньше?
Если габариты модального окна заданы, то все просто:

<div class="fixed-overlay">
    <div class="modal">
        <div class="modal_container">    
        </div>
    </div>
</div>

* {
    box-sizing: border-box;
}

.fixed-overlay {
    position: fixed;
    overflow: auto;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -75px;
}

.modal_container {
    background-color: #fff;
    width: 200px;
    height: 150px;
}

Работает прекрасно, нареканий нет. Но нам такой способ не подходит, ибо мы не хотим зависеть от размеров модального окна.

Первый способ, который удовлетворяет всем перечисленным требованиям я увидел у Jabher. Речь идет об использовании свойства transform и его значения translate вместо margin. Вот как это работает:

.modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.modal_container {
    padding: 20px;
    background-color: #fff;
    color: #000;
}

Магия! Теперь мы не зависим от габаритов .modal_container. Все потому что translate отталкивается от размеров элемента, к которому применятся свойство. Напомню, что процентные значения свойства margin будут вычисляться относительно размеров родителя, что нам явно не подходит.

Теперь о минусах. Используя свойство transform, мы столкнемся с субпиксельным рендерингом. Проще говоря, контент при ресайзе начнет замыливаться, результат выглядит скверно, особенно это заметно при рендере текста и тонких линий, вроде однопиксельных бордеров. Я не смог найти решений этой проблемы, если у вас они есть — пожалуйста, поделитесь в комментариях.

Тадаам

Не так давно я нашел изумительный по своей простоте способ. На помощь спешат инлайн блоки. Их легко центрировать по-горизонтали, навесив text-align: center на родителя. Немного подумав, я вспомнил про замечательное свойство vertical-align. Как оно работает? Если этому свойству задать значение middle, то элементы с этим свойством будут центрироваться по-вертикали друг относительно друга. А это значит, что помимо элемента .modal, в .fixed-overlay должен быть еще кто-то, кто поможет нашей модалке встать по-центру окна. Высота этого кого-то должна быть равна высоте .fixed-overlay. На роль этого помощника напрашивается псевдоэлемент:

<div class="fixed-overlay fixed-overlay__modal">
    <div class="modal">
        <div class="modal_container">    
        </div>
    </div>
</div>

.fixed-overlay__modal {
    text-align: center;
    white-space: nowrap;
}

.fixed-overlay__modal::after {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    content: '';
}

.modal {
    display: inline-block;
    vertical-align: middle;
}

.modal_container {
    margin: 50px;
    padding: 20px;
    min-width: 200px;
    text-align: left;
    white-space: normal;
    background-color: #fff;    
    color: #000;
}

Пример: jsfiddle.net/yvp0jdnw/

Буду рад любой критике, это мой первый опыт написания статей.