如何在页面中间放置一个按钮？答案

【问题标题】：How can I put a button on the middle of the page?如何在页面中间放置一个按钮？
【发布时间】：2019-03-27 21:15:19
【问题描述】：

在页面中间放置按钮时遇到问题！

我尝试在 youtube、google 和 stackoverflow 上搜索，但没有找到任何东西！

<style>
        .firebaseui-auth-container {
            width: 1500px;
            height: 1500px;
            text-align: center;
            margin:0 auto;

        }
</style>

我尝试执行我提到的代码，但它不起作用http://prntscr.com/n3u878（如您所见）

【问题讨论】：

如果用户的浏览器窗口不是 1500px 宽/高会怎样？那应该如何工作？

标签： javascript css button

【解决方案1】：

发布为一个简单的 css sn-p 以显示多种方法之一，具体取决于您的其余要求。

.centerButton {
  left: 50vw;
  top: 50vh;
  position: absolute;
  align-items: center;
  width: 4vw;
}

<html>
  <body>
    <button class="centerButton">Button</button>
  </body>
</html>

【讨论】：

【解决方案2】：

试试这段代码，这段代码将类button-centered的按钮定位在任何容器的中心，在这种情况下，一个类为firebaseui-auth-container的元素

<style>
        .firebaseui-auth-container {
            width: 1500px;
            height: 1500px;
            text-align: center;
            margin:0 auto;
            position:relative;
        }
        .firebaseui-auth-container .button-centered{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate( -50%, -50%);
        }

</style>

【讨论】：

没有任何改变！