Positioning a Div element vertically/horizontally in CSS/Bootstrap?

I'm working on a responsive, fullscreen splash page using the bootstrap grid. Two hyperlinks shall be centered in two sections. The website title shall be vertically aligned and mirrored in the middle of the screen. From the image below you can see how it should look like:

Final layout (To Be):

Final layout (To Be)

I ended up with the following code using flex box alignments. I'm struggling with the positions of the section links as they are positioned too high. In addition, I want to eliminate the margins between the mirrored website titles:

<style type="text/css">         
        .main-wrapper {
            height: 100vh;
            margin: auto;  
        }

        #leftcolumn { 
            background-color:#1c1c1c; 
            color: #ffffff; 
            display:flex; 
            justify-content:center; 
            align-items:center;
            flex-direction: column;
        }

        #leftslogan { 
            align-self: flex-end;
            margin: 0;
            padding: 0;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            color: #ffffff;
        }

        #rightcolumn { 
            background-color:#ffffff; 
            color: #1c1c1c; 
            display:flex; 
            justify-content:center; 
            align-items:center;
            flex-direction: column;
        }

        #rightslogan { 
        align-self: flex-start;
        margin: 0;
        padding: 0;
        writing-mode: vertical-rl;
        transform: scaleY(-1);
        color: #1c1c1c;
        }
    </style>

</head>
<body>
    <div class="main-wrapper">
        <div class="container-fluid h-100">
            <div class="row h-100">
                <div class="col-md-6" id="leftcolumn">
                    <p>LEFT SECTION</p>                         
                    <div id="leftslogan">WEBSITE TITLE</div>
                </div>
                <div class="col-md-6" id="rightcolumn">
                    <p>RIGHT SECTION</p>
                    <div id="rightslogan">WEBSITE TITLE</div>
                </div>
            </div>
        </div>
    </div>
</body>

As-is Screenshot:

As-is Screenshot

Any hints how to vertically align the section links at 50% of the viewport?

Solution

        <style type="text/css">         
        .main-wrapper {
            height: 100vh;
            margin: auto;  
        }

        #leftcolumn { 
            background-color:#1c1c1c; 
            color: #ffffff; 
            display:flex; 
            justify-content:center; 
            align-items:center;
            flex-direction: column;
        }

        #leftslogan { 

            align-self: flex-end;
            margin:  -20px;
            padding:  0;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            color: #ffffff;
        }

        #leftsection {
        justify-content:center;
        align-items: center;
        }

        #rightcolumn { 
            background-color:#ffffff; 
            color: #1c1c1c; 
            display:flex; 
            justify-content:center; 
            align-items:center;
            flex-direction: column;
        }

        #rightslogan { 
        align-self: flex-start;
        margin: -20px;
        padding: 0;
        writing-mode: vertical-rl;
        transform: scaleY(-1);
        color: #1c1c1c;
        }
    </style>

</head>
<body>
    <div class="main-wrapper">
        <div class="container-fluid h-100">
            <div class="row h-100">
                <div class="col-md-6" id="leftcolumn">
                    <span id="leftsection">LEFT SECTION</span>                         
                    <span id="leftslogan">WEBSITE TITLE</span>
                </div>
                <div class="col-md-6" id="rightcolumn">
                    <span>RIGHT SECTION</span>
                    <span id="rightslogan">WEBSITE TITLE</span>
                </div>
            </div>
        </div>
    </div>

I couldn't solve the full positioning of the sections but I changed your 2 paragraphs and subsequent div's to spans to populate the same space and reduced your margins by -20px and the titles now line up perfect. However the section text still seems to sit too high i think if you broke down the items to be able to micro manage them a little bit more you could have an easier time with positioning.