最终效果.png
<div class="container">
<div class="element1">XX管理</div>
<div class="element2">X</div>
</div>
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: space-between;
position: relative; /* 为绝对定位提供上下文 */
height: 100vh; /* 设置容器的高度为视口高度 */
}
.element1 {
position: absolute; /* 绝对定位 */
left: 50%; /* 水平移动到父容器的50%处 */
transform: translateX(-50%); /* 将元素自身的宽度往左移动50%,确保它居中 */
}
.element2 {
margin-left: auto; /* 将第二个元素推到最右边 */
}