在 CSS/Bootstrap 中定位 Div 元素 vertically/horizontally？

Question

我正在使用 bootstrap 网格制作响应式全屏初始页面。两个超链接应在两个部分居中。网站标题应垂直对齐并镜像在屏幕中间。从下图中您可以看到它应该是什么样子：

最终布局（待定）：

我最终得到了以下使用弹性框对齐的代码。我正在为部分链接的位置而苦苦挣扎，因为它们的位置太高了。另外，我想消除镜像网站标题之间的边距：

<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截图：

关于如何将部分链接垂直对齐到视口的 50% 处的任何提示？

Answer 1

由于您的口号，您左右栏的部分标题没有理想地对齐 - 您将它们作为一个整体居中。

这个问题的解决方案之一可以是relative positioning

由于 bootstrap 的间距，口号之间有一些 space。 no-gutters class 应该修复它

Answer 2

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

我无法解决这些部分的完整定位问题，但我将你的 2 段和随后的 div 更改为跨度以填充相同的 space 并将你的边距减少 -20px 和标题现在排列完美。然而，部分文本似乎仍然太高，我认为如果你分解项目以便能够对它们进行更多的微观管理，你可以更轻松地定位。

在 CSS/Bootstrap 中定位 Div 元素 vertically/horizontally？

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

html

css

css-position

alignment

flexbox