如何将绝对定位的元素对齐到中心？
如何将绝对定位的元素对齐到中心？
提问于 2011-10-11 10:14:44
我正在尝试将两个画布堆叠在一起，使其成为一个双层画布。
我在这里看到了一个例子：
<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">有人能帮帮忙吗？
回答 6
Stack Overflow用户
发布于 2013-09-22 12:09:40
如果将left和right都设置为零，并将left和right边距设置为auto，则可以将绝对定位的元素居中。
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;Stack Overflow用户
发布于 2016-01-28 06:10:28
如果您想在不知道元素的宽度和高度的情况下居中对齐，请执行以下操作：
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>
Stack Overflow用户
发布于 2019-11-13 18:54:02
试试这个方法，对我来说效果很好。
position: absolute;
left: 50%;
transform: translateX(-50%); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7720730
复制相关文章
相似问题
腾讯云开发者
