时间戳

首页 > 解决方案 > 您如何使用“位置：绝对”水平居中元素？

javascript - 您如何使用“位置：绝对”水平居中元素？

问题描述

好的.....所以这里列出了一些要知道的事情：

首先，我使用的是 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上的各种链接来尝试，有些非常接近，但仍然没有雪茄。如果您想检查一下，我特别想到的是这里。

第五，除了 bootstrap 之外，不应该有任何额外的 css 影响任何元素——除了 canvas 元素会影响它们的大小（目前以 % 为单位测量，但可能会更改为 vw 或 vh）。

---问题陈述---

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

让我知道我是否可以做任何其他事情来清理我可能没有触及的任何事情。

先感谢您。

- 编辑 -

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

这是关于@SoluableNonagon 提出的解决方案之一的更新（它是具有垂直、水平和“都”对齐的父级和 3 个子级的帖子），因此您可以看到正在发生的事情......参考，底部的灰色条是水平对齐的。

建议的解决方案

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

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

将css“向上”移动到孩子成为父母并且新父母的内容成为孩子的地方会导致这个

潜在的解决方案变化 1

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

Gagandeep Sangh 的解决方案 1

进行更改以影响 1 元素后，结果是这样的

Gagandeep Sangh 的解决方案 2

标签： javascripthtmlcssbootstrap-4

解决方案

通常，当一个元素是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>

推荐阅读