Positioning element at center of screen

Answer 1

Another easy flexible approach to display block at center: using native text alignment with line-height and text-align.

Solution:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

And html sample:

  
My center block

We make div.parent fullscreen, and his single child div.child align as text with display: inline-block.

Advantages:

• flexebility, no absolute values
• support resize
• works fine on mobile

Simple example on JSFiddle: https://jsfiddle.net/k9u6ma8g