如何将绝对位置对准中心?

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

但是我想把画布的两部分都对齐到屏幕的中心。如果我将“左”的值设置为常量，同时改变屏幕的方向(就像我在iPad上做的aps一样)，画布就不会像它在屏幕中的作用那样停留在屏幕的中间

<div align="center">

Can anyone please help?

谁能请帮助?

6 个解决方案

#1

136

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

如果你把左右两边都设为0，把左右边距设为auto，你就可以把一个绝对定位的元素居中。

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

#2

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>

#3

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

小编辑:添加了空白的部分，如Chetan的评论所指出的…

#4

All you have to do is,

你所要做的就是，

make sure your parent DIV has position:relative

确保您的父DIV具有位置:relative

and the element you want center, set it a height and width. use the following CSS

你想要居中的元素，设置它的高度和宽度。使用下面的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/

#5

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

#6

Move the parent div to the middle with

将父div移动到中间

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

Move the second layer over the other with

把第二层移到另一层

position: relative;
left: -100px;

#1

136