javascript - 如何使用 "position: absolute"水平居中元素？

Question

好的......所以这里有一个需要知道的事情列表:

首先，我使用的是fabric.js(我没有将其包含在标签中，因为它不是问题的中心焦点)，这意味着当我创建fabric.js Canvas 的新实例时，它会创建2个 Canvas 元素(.lower-canvas)和(.upper-canvas)，通过与它们交互，我发现它们是绝对定位的，所以长话短说(有一个巨大的运行)我可以'无法改变有 2 个 Canvas 并且我无法更改为其他库的事实。

其次，我使用 bootstrap 来保持 UI 看起来流畅。现在它的结构看起来像

<div class="row">
    <div class="col" id="canvas_container">
        <canvas id="canvas">
        </canvas>
    </div>
</div>
<div class="row">
    <div class="col">
        <br>
    </div>
</div>
<div class="row">
    <div class="col">
        ---some buttons---
    </div>
</div>

所以当页面生成的时候，就从之前的代码块变成了

<div class="row">
    <div class="col" id="canvas_container">
        <div class="canvas-container">
            <canvas id="canvas" class="lower-canvas">
            </canvas>
            <canvas class="upper-canvas">
            </canvas>
        </div>
    </div>
</div>
<div class="row">
    <div class="col">
        <br>
    </div>
</div>
<div class="row">
    <div class="col">
        ---some buttons---
    </div>
</div>

它将之前的 Canvas 更改为具有不同类的 2 个不同 Canvas ，但在其中一个 Canvas 上保留初始 Canvas 的 id，并创建一个具有“canvas-container”类的 div 来封装这两个 Canvas 。

第三， Canvas 将具有动态尺寸。用户将选择他们想要使用的 Canvas 尺寸来与织物 Canvas 交互。

第四，我查看了 stackoverflow 上的各种链接进行尝试，有些已经非常接近，但仍然没有雪茄。我具体想到的是here如果您想查看的话。

第五，除了 bootstrap 之外，不应该有任何额外的 css 影响任何元素 - 除了影响其大小的 Canvas 元素(当前以 % 测量，但可能更改为 vw 或 vh)。

---问题陈述---

为了重述这个问题，我试图将两个具有绝对位置的 Canvas 居中。我认为如果我可以将 .canvas-container 居中，这可能是最好的实现，因为两个 Canvas 都封装在其中并且它们具有绝对定位。对此有什么想法吗？

如果我还可以做任何其他事情来清理我可能没有触及的任何内容，请告诉我。

提前谢谢您。

--编辑--

为了提供更多背景信息，浅蓝色框始终是需要居中的 Canvas 元素。

这里是关于 @SoluableNonagon 提出的解决方案之一的更新(该帖子有一个父级和 3 个子级，垂直、水平和“两者”对齐)，以便您可以看到发生了什么。 ..作为引用，底部的灰色条水平对齐。

绿色框是共享 col 类的 #canvas_container 元素。

浅蓝色框由两 block Canvas 组成。

将CSS“向上”移动到子级成为父级的位置，并且新父级的内容成为子级的结果

@Gagandeep Sangh 的解决方案，没有进行适当的更改来影响一个特定元素。

进行更改以影响第 1 个元素后，结果如下

Answer 1

通常，当元素为 position:absolute 时，父元素为 position:relative。 那么，绝对元素为left: 50%;变换:translateX(-50%); 用于水平居中。对于垂直居中 top: 50%;变换:translateY(-50%);

.parent {
  position: relative;
  height: 200px; // needs height/width cause 'absolute' child takes no space
  width: 200px;
  border: 1px solid red;
}

.child-1 {
  position: absolute;
  height: 50px;
  width: 50px;
  border: 1px solid blue;
  
  left: 50%;
  transform: translateX(-50%);
}

.child-2 {
  position: absolute;
  height: 50px;
  width: 50px;
  border: 1px solid orange;
  
  top: 50%;
  transform: translateY(-50%);
}

.child-3 {
  position: absolute;
  height: 50px;
  width: 50px;
  border: 1px solid green;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class='parent'>
  <div class='child-1'>horizontal</div>
  <div class='child-2'>vertical</div>
  <div class='child-3'>both</div>
<div>