Question

这是html。

<template name="atTemplate">
    <div class="card card-container">
        <div class="at-form">
            ...... <!-- embedded form using {{> atForm}} -->
        </div>
    </div>
</template>

最初没有任何CSS，嵌入的表单停留在屏幕的左上角。

因此，当这是下面的css时，登录框卡在屏幕的左下角。改变position: fixed并没有什么不同。

.card-container.card {    
  width: 262px;          
  position: absolute;
  bottom: 0px;
  margin-left:auto; 
  margin-right:auto;
}

更改position: absolute框会转移到水平中间，但现在位于屏幕顶部。

我已尝试过许多其他建议，例如删除和交换以下内容。然而，登录框现在转到屏幕的顶部和水平中间。

  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;

我也看到嵌套css的一些解决方案。外部div是绝对的，内部是相对的或者其他什么，但我不知道它是否在这里有用。

任何帮助将不胜感激。

Answer 1

你是如此亲密。只需添加left:0和right:0，但不要添加顶部位置：

.card-container.card {    
  width: 262px;          
  position: absolute;
  bottom: 0px;
    right:0;
    left:0;
  margin-left:auto; 
  margin-right:auto;
}

<强> fiddle

如何水平居中登录框并将其放在页面底部？

1 个答案: