如何使用 z-index 和绝对定位将我的内联按钮居中？

Question

我已经设置了 Slick 滑块来为我的登录页面显示图像轮播。我读过，为了在旋转木马前面有按钮，我必须在我的 CSS 中使用 position: absolute 和 z-index: 1。这让我可以让我的旋转木马占据整个视口，但我似乎无法重新定位我的按钮，甚至无法将它们居中。通常它会是 text-align: center; 居中按钮，但在这种情况下似乎不起作用。我正在使用 jQuery 移动图书馆。

如何重新定位我的按钮，使它们始终出现在视口的中心，以及如何改变按钮的宽度？

图像描述。 A. 我当时的登录页面。 B. 我希望我的按钮所在的位置，最好能响应以占据视口的 %。 C & D. 当我关闭绝对定位时，我可以在开发工具中将按钮居中，但它会将我的滑块小部件向下推，并且不会让按钮在 z- 上向前推指数.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;
}

Answer 1

你可以用一个转换来完成：translateY(-50%);和一个 top: 50% 的组合，让它到达屏幕中间

#LandingButtons {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
}

希望对您有所帮助

Answer 2

您似乎忘记使用 margin auto 这将帮助您居中对齐 div：#LandingButtons{ text-align: center; Margin: 0 auto; }

Answer 3

如果您想将您的元素水平和垂直居中，您可以使用此代码，它应该对您有所帮助。此外，如果某些内容是绝对定位的，则无需使用 z-index。

.center-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

这应该足够了，如果您为此使用绝对位置 div，请不要忘记为 div 设置它应该定位的相对位置。

如何使用 z-index 和绝对定位将我的内联按钮居中？

How do I center my inline buttons which using the z-index and an absolute positioning?

html

css

jquery

z-index

responsive