Question

我正在尝试将两个画布堆叠在一起，并使其成为双层画布。

我在这里看到了一个例子：

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

但是我想将两个画布对齐设置在屏幕的中心。如果我将'left'的值设置为常量，当我改变屏幕的方向时（因为我在iPad上执行aps），画布将不会像在屏幕中间那样停留在

<div align="center">

有人可以帮忙吗？

Answer 1

如果将左右边距设置为零，左右边距设置为自动，则可以将绝对定位的元素居中。

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

Answer 2

如果要在不知道宽度和高度的情况下居中对齐元素，请执行以下操作：

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

示例：

*{
  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>

Answer 3

您是否尝试过使用？：

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

不确定它是否有效，但值得一试......

次要编辑：添加了左边边距部分，正如Chetan的评论所指出的那样......

Answer 4

你所要做的就是，

确保您的父DIV有位置：relative

并且您想要居中的元素，将其设置为高度和宽度。使用以下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/

Answer 5

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

Answer 6

尝试这种方法，对我来说很好

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

Answer 7

使用

将父div移动到中间位置

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

使用

将第二层移到另一层上

position: relative;
left: -100px;

如何将绝对位置对齐到中心？

7 个答案: