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    lt div style  position  relative   gt    lt canvas id  layer1  width  100  height  100      style  position  absolute  left  0  top  0  z-index  0   gt  lt  canvas gt    lt canvas id  layer2  width  100  height  100      style  position  absolute  left  0  top  0  z-index  1   gt  lt  canvas gt   lt  div gt    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    lt div align  center  gt    Can anyone help   please

User · Answer

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

User · Answer

All you have to do is   make sure your parent DIV has position relative  and the element you want center  set it a height and width  use the following CSS   layer       width  600px  height  500px      display  block      position absolute      top 0      left  0      right 0      bottom  0      margin auto      http   jsbin com aXEZUgEJ 1

User · Answer

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

User · Answer

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     x000D   x000D     x000D    margin 0  x000D    padding 0  x000D    x000D  section  x000D    background red  x000D    height  100vh  x000D    width  100vw  x000D    x000D  div    x000D    width  80vw  x000D    height  80vh  x000D    background  white  x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    transform  translate -50   -50    x000D    x000D   lt section gt  x000D     lt div gt  x000D       lt h1 gt Popup lt  h1 gt  x000D     lt  div gt  x000D   lt  section gt  x000D   x000D   x000D

User · Answer

try this method  working fine for me  position  absolute  left  50   transform  translateX -50

User · Answer

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

User · Answer

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

[css] How to align absolutely positioned element to center?

Examples related to css

Examples related to html5-canvas