我已经设置了Slick滑块来显示我登录页面的图像轮播。我已经读过，为了在旋转木马前面有按钮，我必须在我的CSS中使用position: absolute和z-index: 1。这让我可以让我的旋转木马占据整个视口，但我似乎无法重新定位我的按钮甚至将它们居中。通常它是text-align: center;中心按钮，但它似乎并没有在这种情况下工作。我正在使用jQuery Mobile库。
如何重新定位我的按钮，使它们始终显示在视口的中心，以及可能更改按钮的宽度？
Image Desc. A. My Login page at the minute. B. Where I would like my buttons to be, preferably responsive to take up a % of the viewport. C & D. I can center the buttons in dev tools when I turn off the absolute positioning, but it pushes my slider widget down and does not let the buttons be pushed forward on the z-index.2
HTML：
<body>
<!-- Buttons -->
<div id="LandingButtons">
<button class="ui-btn ui-btn-inline">Sign Up</button>
<button class="ui-btn ui-btn-inline">Log In</button>
</div>
<!-- HTML for images -->
<div class="your-class" ">
<div> <img src="img/slider/step1.png " alt=" " style="width: 100vw; height: 100vh; "></div>
<div> <img src="img/slider/step2.png " alt=" " style="width: 100vw; height: 100vh; "></div>
<div> <img src="img/slider/step3.png " alt=" " style="width: 100vw; height: 100vh; "></div>
<div> <img src="img/slider/step4.png " alt=" " style="width: 100vw; height: 100vh; "></div>
</div>
<!-- slick.js -->
<script type="text/javascript " src="http://code.jquery.com/jquery-1.11.0.min.js "></script>
<script type="text/javascript " src="http://code.jquery.com/jquery-migrate-1.2.1.min.js "></script>
<script type="text/javascript " src="slick/slick.min.js "></script>
<!-- External JS file Initializes the slider -->
<script type="text/javascript " src
CSS：
#LandingButtons{
text-align: center;
position: absolute;
z-index: 1;
}
你可以用变换来做：translateY（-50％）;和一个顶部：50％的组合，使它到屏幕中间
#LandingButtons {
position: absolute;
text-align: center;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
z-index: 1;
}
我希望这能帮到您
好像你忘了使用margin auto这将帮助你居中对齐div：#LandingButtons{ text-align: center; Margin: 0 auto; }
如果你想在水平和垂直方向中心你的元素，你可以使用它应该帮助你的代码。此外，如果某些东西是绝对的，你不需要使用z-index。
.center-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这应该足够了，如果你使用位置绝对值，那么不要忘记为它应该放置的div设置相对位置。