How to center div elements in canvas

Question

I am drawing a canvas with a javascript function and it always aligns to windows size. I want to have a

<div>...</div>

Element overlay a canvas and be vertically and horizontically centered.

The only thing I came up was

position:absolue;

But then again

top:0;
left:0;
bottom:0;
right:0;

Only centers my element horizontically not vertically.

So I've changed it to.

 left:calc(50% - *divwidth*/2);
 top:calc(50% - *divheight*/2);

But it is not optimal and doesnt work for various windows sizes.

I think that this might not even be possible with pure css, so I am happy to use JS but how do I do that?

@Phix can you give an example? If I change % to vh/vw it still wont center... — digitalsuite.net, Jan 30 '18 at 01:35
Possible duplicate of [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — Nikola Lukic, Jun 21 '19 at 11:51

score 0 · Answer 1 · answered Jan 30 '18 at 02:32

0

Have you tried giving the div overlay a height and width of 100%?

answered Jan 30 '18 at 02:32

fishstix

score 0 · Answer 2 · answered Jan 30 '18 at 02:39

0

The answer from Adrian P. in Position div to center of visible area worked surprisingly well for my case and a fixed width height div. I will be using this until I find a better one.

answered Jan 30 '18 at 02:39

digitalsuite.net

2 Answers2