[diablo1]

    <div class=element></div>
    
    <style>
    .element{
    position:absolute;
    width:500px;
    height:500px;
    left:50%;
    top:50%;
    margin-top:-250px;
    margin-left:-250px;
    }
    </style>

[viklove]

Don't do this, you will run into edgecases that make things look jank. Use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[diablo1]

Thanks for the tip. Any particular browser that causes such 'jank'?

[Chyzwar]

This would center a fixed sized element in absolute position to page, this was never an issue. Problems start when you do not know size of your element and its parent. Flex finally fixes[1] this issue but it was not fully supported until recently[2].

[1] https://philipwalton.github.io/solved-by-flexbox/demos/verti... [2] https://github.com/philipwalton/flexbugs

Most of the flexbugs are now fixed and flex should be recommended way of making layouts.

[colejohnson66]

This requires advanced knowledge of the width and height of the `.element`