Question

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

我尝试在youtube，google和stackoverflow上进行搜索，但没有找到任何内容！

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

        }
</style>

我尝试执行我提到的代码，但是它http://prntscr.com/n3u878无效（如您所见）

Answer 1

发布为简单的CSS片段，以显示多种方法之一，具体取决于您的其余需求。

{{ { result: `Hello, ${name}!` } | return }}

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

Answer 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>

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

2 个答案: