How do you horizontally center an element with "position: absolute"?

Question

Okay..... So here is a list of things to know:

First, I am using fabric.js (I didn't include it in the tags because it's not the central focus of the problem), which means that when I create a new instance of a fabric.js canvas, it creates 2 canvas elements (.lower-canvas) and (.upper-canvas), which by interacting with it, I've come to find out that they are absolutely positioned, so long story short (with a huge run on) I can't change the fact there are 2 canvases and I can't change to a different library.

Second, I am using bootstrap to keep the UI looking slick. Right now it's structure looks like

<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>

So when the page is generated, it changes from the previous code block to

<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>

which changes the previous canvas to 2 different canvases with different classes but keeps the id of the initial canvas on one of the canvases, and creates a div with class "canvas-container" to encapsulate both canvases.

Third, the canvases will have dynamic sizes. The user will select which size canvas they want to use to interact with the fabric canvas.

Fourth, I have looked at various links on stackoverflow to try, and some have come really close, but still no cigar. The one I am thinking of specifically is here if you'd like to check it out.

Fifth, there shouldn't be any additional css affecting any of the elements apart from bootstrap - with the exception of the canvas elements to affect their size (measured currently in % but may change to vw or vh).

---The Problem Statement---

Just to restate the problem, I am trying to center both canvases that have absolute positions. I think this might be best accomplished if I can center just the .canvas-container, since both canvases are encapsulated in it and since they have absolute positioning. Any thoughts on this?

Let me know if there is anything else I can do to clear up anything I may not have touched on.

Thank you in advance.

--edit--

Just to give a little more context, the light blue boxes will always be the canvas element that needs to be centered.

Here is an update regarding one of the proposed solutions from @SoluableNonagon (it is the post that has a parent and 3 children that are vertically, horizontally, and "both" aligned), so you can see what is going on... for reference, the gray bar at the bottom is horizontally aligned.

The green box is the #canvas_container element which shares the class col.

The light blue box is made up of both canvases.

Moving the css "up" on level to where the child becomes the parent and the new parent's contents becomes the child results in this

@Gagandeep Sangh 's solution without making proper changes to affect the one specific element.

After making the changes to affect the 1 element, the result is like so

Answer 1

Generally, when an element is position: absolute the parent is position: relative. Then, the absolute element is left: 50%; transform: translateX(-50%); for horizontal centering. For vertical centering 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

The <div class="canvas-container"> can be centered respective to its parent <div class="col"> using position:absolute; and setting the col div to position:relative; but here comes a new issue that after setting the <div class="canvas-container"> as absolute it will flow out of its parent div and the height of parent div will collapse as it doesn't have any other content in it, than you need to add some height to that div also, so basically you can try this

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

Hope it works.