在 CSS/Bootstrap 中垂直/水平定位 Div 元素？答案

【问题标题】：Positioning a Div element vertically/horizontally in CSS/Bootstrap?在 CSS/Bootstrap 中垂直/水平定位 Div 元素？
【发布时间】：2026-01-05 13:30:02
【问题描述】：

我正在使用引导网格制作响应式全屏启动页面。两个超链接应位于两个部分的中心。网站标题应垂直对齐并镜像在屏幕中间。从下图中您可以看到它的外观：

最终布局（待定）：

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

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

原样截图：

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

【问题讨论】：

标签： html css flexbox alignment css-position

【解决方案1】：

        <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 更改为跨度以填充相同的空间并将您的边距减少 -20 像素，并且标题现在排列完美。但是，部分文本似乎仍然太高，我认为如果您分解项目以便能够对它们进行更多的微观管理，您可以更轻松地进行定位。

【讨论】：

谢谢，这对我来说很完美。我已经设法定位了部分链接，但仍在为口号而苦苦挣扎。所以这是我最终寻找的最后一个提示。

【解决方案2】：

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

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

由于引导程序的排水沟，口号之间有一些空间。 no-gutters 类应该修复它

【讨论】：

谢谢，您的提示确实帮助我改进了代码结构。