如何调整绝对定位元素的中心？

我试图堆叠两个画布在一起，使它成为一个双层画布。

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

<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 上做应用程序一样) ，画布不会像它在屏幕中间那样保持不变

<div align="center">

有人能帮忙吗？

212582 次浏览
小开

你试过用吗:

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

不知道能不能成功，但值得一试。

小编辑 : 添加了左边距部分，正如 Chetan 在评论中指出的那样..。

小开

将父 div 移到中间

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

将第二层移动到另一层上

position: relative;
left: -100px;
小开

如果将左右边距都设置为零，并将左右边距设置为 auto，则可以将一个绝对定位的元素居中。

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

您所需要做的就是确保您的父 <div>具有 position:relative，并为您想要居中的元素设置高度和宽度。使用以下 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/

小开

如果你想在不知道宽度和高度的情况下将一个元素居中对齐，可以这样做:

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>

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

试试这个方法，对我很有效

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

提交答案