Как вы центрируете элемент по горизонтали с помощью «position: absolute»?

Question

Хорошо ... Итак, вот список вещей, которые нужно знать:

Во-первых, я использую fabri c. js (я не включил его в теги, потому что он не в центре внимания проблемы), что означает, что когда я создаю новый экземпляр холста fabri c. js, он создает 2 элемента холста (.lower-canvas) и (.upper-canvas), которые взаимодействуя с ним, я пришел к выводу, что они абсолютно позиционированы, короче говоря (с огромным пробегом), я не могу изменить тот факт, что есть 2 холста, и я не могу перейти на другую библиотеку .

Во-вторых, я использую bootstrap, чтобы пользовательский интерфейс выглядел гладко. Сейчас его структура выглядит как

<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 разных холста с разными классы, но сохраняет идентификатор исходного холста на одном из холстов и создает div с классом «холст-контейнер» для инкапсуляции обоих холстов.

В-третьих, холсты будут иметь динамические c размеры. Пользователь выберет холст какого размера он хочет использовать для взаимодействия с fabri c canvas.

В-четвертых, я просмотрел различные ссылки в stackoverflow, чтобы попробовать, и некоторые из них подошли очень близко, но все еще нет сигара. Я имею в виду именно здесь , если вы хотите это проверить.

В-пятых, не должно быть никаких дополнительных css, влияющих на какие-либо элементы, кроме bootstrap - за исключением элементов холста, влияющих на их размер (в настоящее время измеряется в%, но может измениться на vw или vh).

--- Постановка проблемы ---

Чтобы повторить проблему, я пытаюсь центрировать оба холста, которые имеют абсолютные позиции. Я думаю, что это будет лучше всего, если я смогу центрировать только .canvas-container, поскольку оба холста инкапсулированы в нем и имеют абсолютное позиционирование. Есть какие-нибудь мысли по этому поводу?

Дайте мне знать, если я могу еще что-нибудь сделать, чтобы прояснить то, чего я, возможно, не коснулся.

Заранее спасибо.

- изменить -

Чтобы дать немного больше контекста, голубые прямоугольники всегда будут элементом холста, который необходимо центрировать.

Вот обновление, касающееся одного из предлагаемых решений от @SoluableNonagon (это сообщение, у которого есть родитель и 3 дочерних элемента, которые выровнены по вертикали, горизонтали и «оба»), так что вы можете видеть, что происходит ... для справки, серая полоса внизу выровнена по горизонтали.

Зеленое поле - это элемент #canvas_container, который разделяет класс col.

Голубая рамка состоит из обоих полотен.

Перемещение css «вверх» на уровень, где дочерний элемент становится родителем, а содержимое нового родителя становится дочерним, приводит к

@ Gagande Решение ep Sangh без внесения надлежащих изменений, влияющих на один конкретный элемент c.

После внесения изменений, влияющих на элемент 1, результат примерно такой

Answer 1

<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%);
}

Надеюсь, это сработает.

Answer 2

Обычно, когда элементом является 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>