How to align absolutely positioned element to center?

Question

I am trying to stack two canvas together and make it a double layers canvas.

I've saw an example here:

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

But i would like to set both of the canvas align at the center of the screen. If i set the value of left as a constant, while I change the orientation of the screen (as I'm doing aps on iPad) the canvas won't remain at the middle of the screen like how it act in

<div align="center">

Can anyone help, please?

score 296 · Answer 1 · answered Sep 22 '13 at 04:09

296

If you set both left and right to zero, and left and right margins to auto you can center an absolutely positioned element.

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;

answered Sep 22 '13 at 04:09

Andrew

227,796
193
515
708

1

Don't you also need to give the element a width? – Gabriel Florit Nov 21 '13 at 17:23
3

I don't think it's necessary in this case. – Andrew Nov 21 '13 at 21:23
Just tried this and it works, it should be marked as correct answer – R Reveley Jun 25 '14 at 14:34
You can use change the left or right values to move the object out of the center, fixed. Using `left: 80px;` will move the object 40px (!) to the right of the center. – SPRBRN Jul 10 '14 at 10:55
The only problem with this is, if there's no fixed width, the `left:0;` and `right:0;` will make it fill the container rather than keep to the width of the content. – user56reinstatemonica8 Sep 12 '14 at 09:43
Doesn't work for me in Chrome. Parent div set to position:absolute; – Francesca Jun 09 '15 at 11:32
tested one thousand things, and this is the one that works when centering lots of overlay canvas. – eri0o Sep 15 '15 at 23:52
thanks @Andrew this worked perfectly for me on Chrome and IE. – Miss.Vy Sep 29 '15 at 05:36
16

Remark: Only works if the styled element has a given width. (either px or %) – Johnny Wong Dec 16 '15 at 07:36
How can I set to horizontally center as well? Any specific solution? – Krupal Patel Feb 15 '18 at 09:28
1

@JohnnyWong Works for me without any given width on a paragraph element. – Pound Hash Dec 12 '22 at 23:22

score 147 · Answer 2 · answered Jan 27 '16 at 22:10

147

If you want to center align an element without knowing it's width and height do:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Example:

*{
  margin:0;
  padding:0;
}
section{
  background:red;
  height: 100vh;
  width: 100vw;
}
div{  
  width: 80vw;
  height: 80vh;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<section>
  <div>
    <h1>Popup</h1>
  </div>
</section>

answered Jan 27 '16 at 22:10

Vinicius Santana

3,936
3
25
42

1

It's a nice trick, but there is a little caveat in your approach. If the element's width is not set but it has inline content that's wider than 50% of the parent's width, then the extra 50% offset from the `left` will extrapolate the parent's width, breaking the content to the next lines to avoid overflow. But it's possible to keep the content inline while using this approach by setting in the element the `white-space` attribute to `nowrap`. Try that in [this JSFiddle](https://jsfiddle.net/d9xLun6b/2/). – Felypp Oliveira Dec 28 '20 at 17:50

score 31 · Answer 3 · answered Nov 13 '19 at 10:54

31

try this method, working fine for me

position: absolute;
left: 50%;
transform: translateX(-50%);

answered Nov 13 '19 at 10:54

subindas pm

2,668
25
18

Mihai Ciobanu · Answer 4 · 2023-04-01T07:16:37.090

23

To align elements with knowing width and height use the solution below:

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

For elements with unknown width and height use the following solution:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

edited Apr 01 '23 at 07:16

answered Feb 21 '17 at 14:05

Mihai Ciobanu

421
4
6

Deleteman · Answer 5 · 2011-10-11T02:28:47.933

18

Have you tried using?:

left:50%;
top:50%;
margin-left:-[half the width] /* As pointed out on the comments by Chetan Sastry */

Not sure if it'll work, but it's worth a try...

Minor edit: Added the margin-left part, as pointed out on the comments by Chetan...

edited Oct 11 '11 at 02:28

answered Oct 11 '11 at 02:17

Deleteman

8,500
6
25
39

Ya I have tried this, but the canvas "start" from middle but not "placed" in the middle of the screen. Is there anyway to set left:50% and move the canvas to left again? – PaulLing Oct 11 '11 at 02:21
2

@PaulLing `margin-left: ` – Chetan S Oct 11 '11 at 02:25
1

What Chetan said.. beat me to it :P I'll edit my response for future generations... – Deleteman Oct 11 '11 at 02:26
The width of the screen is different when the iPad is placed in different orientation – PaulLing Oct 11 '11 at 02:56
He meant half the width of your canvas element..., that would make it margin-left:-50px; – Deleteman Oct 11 '11 at 03:13

score 9 · Answer 6 · edited Nov 02 '21 at 07:45

9

All you have to do is make sure your parent <div> has position:relative, and set a height and width for the element you want centered. Use the following CSS:

.layer {
    width: 600px; height: 500px;
    display: block;
    position:absolute;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    margin:auto;
}

https://output.jsbin.com/aXEZUgEJ/1/

edited Nov 02 '21 at 07:45

tagurit

494
5
13

answered Dec 04 '13 at 05:28

STEEL

8,955
9
67
89

2

Only solution that works for me. Parent is set to flex, flex-grow & overflow. Child was positioned out of frame for images larger than the parent. It didn't seem to be aware of the parent's width. It's fixed now. BIG thanks! – Kai Dec 18 '15 at 09:41

score 0 · Answer 7 · answered Feb 28 '23 at 03:19

There's another approach I'd like to share, may be useful if your are building something from scratch.

I was strugueling with this same situation but when I used the methods above it didn't work because I had a class on every label that changes the background when scrooling.

I created a method on Javascript to calculate the size of the element and viewport to locate properly every time the viewport size changes.

function setOnCenter(element) {
  let elm = $("#" + element);
  let currentlyViewportWidth = $(window).width();
  let unitWidthViewport = currentlyViewportWidth / 100;
  let pxSizeText = elm.outerWidth();
  let percentSizeText = pxSizeText / unitWidthViewport;
  let halfPercentSizeText = percentSizeText / 2;
  let result = 50 - halfPercentSizeText;

  elm.css({ width: pxSizeText + 'px', left: result + '%'});
}

window.addEventListener("resize", function (event) {
  setOnCenter('stuff_text');
})

Of course the setOnCenter method must be execute when document is ready. If there something to improved I'd be glad to read it.

score 0 · Answer 8 · answered Oct 11 '11 at 02:39

0

Move the parent div to the middle with

left: 50%;
top: 50%;
margin-left: -50px;

Move the second layer over the other with

position: relative;
left: -100px;

answered Oct 11 '11 at 02:39

Spencer

1,476
1
14
26

How to align absolutely positioned element to center?

8 Answers8

Linked