如何将绝对定位的元素对齐到中心？

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

尝试这个方法，对我来说效果很好

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

Answer 4

要对齐已知宽度和高度的元素，请使用以下解决方案：

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

对于未知宽度和高度的元素，请使用以下解决方案：

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

Answer 5

您尝试过使用吗？：

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

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

小修改：添加了左边距部分，正如 Chetan 评论中所指出的那样...

Answer 6

您所要做的就是确保您的父

具有 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/

Answer 7

将父级 ​​div 移动到中间 使用

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

将第二层移动到另一层之上

position: relative;
left: -100px;

Answer 8

我想分享另一种方法，如果您从头开始构建某些东西，它可能会很有用。

我在同样的情况下苦苦挣扎，但是当我使用上面的方法时，它不起作用，因为我在每个标签上都有一个类，可以在滚动时更改背景。

我在 Javascript 上创建了一个方法来计算元素和视口的大小，以便在每次视口大小发生变化时正确定位。

function setOnCenter(element) {
  let elm = $("#" + element);
  let currentlyViewportWidth = $(window).width();
  let unitWidthViewport = currentlyViewportWidth / 100;
  let pxSizeText = elm.outerWidth();
  let percentSizeText = pxSizeText / unitWidthViewport;
  let halfPercentSizeText = percentSizeText / 2;
  let result = 50 - halfPercentSizeText;

  elm.css({ width: pxSizeText + 'px', left: result + '%'});
}

window.addEventListener("resize", function (event) {
  setOnCenter('stuff_text');
})

当然，setOnCenter 方法必须在文档准备好时执行。如果有什么需要改进的地方，我很乐意阅读。

Answer 9

此答案适用于那些不确定宽度并希望确保文本保持在一行上的人：

position: absolute;
text-align: center;
left: 50%;
transform: translateX(-50%);
white-space: nowrap; /* Prevents text from breaking into multiple lines */