Align the modal window in the center

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 versatile and covering all the cases I have ever encountered.

Wording
Center the modal window horizontally and vertically.

Conditions

• Dimensions modalki can be specified in any unit of measurement. Or may not be specified at all.
• Responsiveness. When resizing windows, modalka adapts to the current size.
• If the modal is folded in such a way 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 on CSS, without the use of JS.

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

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

It 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 way that meets all the requirements listed I saw at Jabher . This is about using the transform property and its translate value instead of the 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 do not depend on the dimensions. Modal_container. All because the translate is repelled by the size of the element to which the property is applied. Recall 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 minuses. Using the transform property, we will encounter sub-pixel rendering. Simply put, the content will begin to blur when resizing, the result looks bad, this is especially noticeable when rendering text and thin lines, such as single-pixel border. I could not find a solution to this problem, if you have them - please share in the comments.

Tadaam

Not so long ago, I found an amazingly simple way. Inline blocks are rushing to help. They are easy to center horizontally, hanging the text-align: center on the parent. A little thought, I remembered the remarkable vertical-align property. How does it work? If this property is set to the middle value, then the elements with this property will be centered vertically relative to each other . And this means that in addition to the .modal element, there must be someone else in the .fixed-overlay who will help our modal stand in the center of the window. The height of this someone must be equal to the height .fixed-overlay. The pseudo-element suggests the role of this helper:

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

Example: jsfiddle.net/yvp0jdnw

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