3 ms·
<div class=element></div> <style> .element{ position:absolute; width:500px; height:500px; left:50%; top:50%; margin-top:-25
by diablo1 6y ago
<div class=element></div>
<style>
.element{
position:absolute;
width:500px;
height:500px;
left:50%;
top:50%;
margin-top:-250px;
margin-left:-250px;
}
</style>
- viklove 6y agoDon'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/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- diablo1 6y agoThanks for the tip. Any particular browser that causes such 'jank'?
- Chyzwar 6y agoThis 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/vertical-centering/ https://philipwalton.github.io/solved-by-flexbox/demos/verti... [2] https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs Most of the flexbugs are now fixed and flex should be recommended way of making layouts.
- colejohnson66 6y agoThis requires advanced knowledge of the width and height of the `.element`