How to align absolutely positioned element to center?

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?

---

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;

---

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>

---

try this method, working fine for me

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

---

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%);

---

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...

---

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/

---

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;

---

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.