Center the modal window

My first post.
Centering a block relative to another block is a relatively frequent task, this is its next solution. For me, it has become the most universal and covers all the cases I have ever encountered.

Wording
Center the modal window horizontally and vertically.

Conditions

• Dimensions modals can be specified in any units. Or they may not be indicated at all.
• Responsiveness. When resizing a window, the modulator adjusts to the current size.
• If the modal is made up so that it has min-height / min-width, then when resizing the window to a smaller size, a scroll should appear.
• IE 9+.
• Positioning should be implemented in CSS, without the use of JS.

How was this done before?
If the dimensions of the modal window are set, then everything is simple:

* {
    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;
}

Works great, no complaints. But this method does not suit us, because we do not want to depend on the size of the modal window.

The first method that satisfies all of the above requirements I saw with Jabher . It is about using the transform property and its translate value instead of margin. Here's how it works:

.modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.modal_container {
    padding: 20px;
    background-color: #fff;
    color: #000;
}

Magic! Now we are not dependent on the dimensions of .modal_container. That's because translate is based on the size of the element to which the property is applied. Let me remind you that the percentage values ​​of the margin property will be calculated relative to the size of the parent, which is clearly not suitable for us.

Now about the cons. Using the transform property, we will encounter subpixel rendering. Simply put, the content will start to blur when resizing, the result looks bad, this is especially noticeable when rendering text and thin lines, like single-pixel borderboards. I could not find solutions to this problem, if you have them - please share in the comments.

Tadaam

Not so long ago I found a way amazing in its simplicity. Inline blocks rush to the rescue. They are easy to center horizontally by hanging text-align: center on the parent. After a little thought, I remembered the wonderful vertical-align property. How does it work? If this property is set to middle, then elements with this property will be centered vertically relative to each other . And this means that in addition to the .modal element, in .fixed-overlay there must be someone else who helps our modal stand in the center of the window. The height of this someone should be equal to the height .fixed-overlay. A pseudo-element begs for the role of this assistant:

.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;
}

Example: jsfiddle.net/yvp0jdnw

I will be glad to any criticism, this is my first experience in writing articles.