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

【问题标题】：How do I center my inline buttons which using the z-index and an absolute positioning?如何将使用 z-index 和绝对定位的内联按钮居中？
【发布时间】：2018-08-29 16:11:09
【问题描述】：

我设置了 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;
}

【问题讨论】：

标签： jquery html css z-index responsive

【解决方案1】：

您可以通过转换来做到这一点： translateY(-50%);和 top: 50% 的组合使其位于屏幕中间

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

希望对你有帮助

【讨论】：

【解决方案2】：

好像您忘记使用自动边距，这将帮助您居中对齐 div：#LandingButtons{ text-align: center; Margin: 0 auto; }

【讨论】：

【解决方案3】：

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

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

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

【讨论】：