Question

好吧.....所以这是要知道的事情清单：

首先，我正在使用fabric.js（我没有将其包含在标签中，因为这不是问题的中心），这意味着当我创建一个fabric.js画布的新实例时，它会创建2个画布元素（.lower-canvas）和（.upper-canvas），通过与之交互，我发现它们是绝对定位的，因此长话短说（有很长的发展），我可以'不能更改有2个画布的事实，我不能更改为其他库。

第二，我正在使用引导程序来使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>

将先前的画布更改为2个具有不同类的不同画布，但将初始画布的ID保留在其中一个画布上，并创建一个带有“ canvas-container”类的div来封装两个画布。

第三，画布将具有动态尺寸。用户将选择他们要用于与织物画布交互的尺寸的画布。

第四，我查看了stackoverflow上的各种链接以进行尝试，有些确实很接近，但仍然没有雪茄。我要特别考虑的是here，如果您想查看一下的话。

第五，除引导程序以外，不应有任何其他影响任何元素的css除外，除了canvas元素会影响它们的大小（当前以％度量，但可能更改为vw或vh）。

---问题陈述---

只是为了重申问题，我试图将两个具有绝对位置的画布居中。我认为，如果仅将.canvas-container居中，则可能会达到最佳效果，因为两个画布都封装在其中，并且它们具有绝对的位置。有什么想法吗？

让我知道我是否还有其他办法可以清除我可能未曾涉及的任何内容。

谢谢。

-编辑-

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

这里是@SoluableNonagon提出的一种解决方案的更新（该帖子有一个父级和3个子级，它们在垂直，水平和“两者”对齐的情况下），因此您可以看到发生了什么。 ..供参考，底部的灰色条水平对齐。

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

浅蓝色的盒子由两个画布组成。

将css“上移”到子级成为父级，新父级的内容成为子级的水平

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

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

Answer 1

通常，当元素为position: absolute时，父元素为position: relative。然后，用于水平居中的绝对元素为left: 50%; transform: translateX(-50%);。对于垂直居中top: 50%; transform: 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>

Answer 2

可以使用<div class="canvas-container">将<div class="col">与其父position:absolute;居中，并将col div设置为position:relative;，但是在此之后出现了一个新问题将<div class="canvas-container">设置为absolute，它将流出其父div，并且父div的高度将折叠，因为其中没有其他内容，因此您需要为此添加一些高度div，所以基本上您可以尝试一下

.col{
    min-height:500px;
    position:relative;
}
.canvas-container{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

希望它能起作用。

您如何将元素的“位置：绝对”水平居中？

2 个答案: