如何將一個登錄框水平居中放置在頁面底部？

這是html。如何將一個登錄框水平居中放置在頁面底部？

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

Initally沒有任何的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..like外層div是絕對和內部是相對或東西，但我不知道這是否可以幫助這裏的一些解決方案。

任何幫助，將不勝感激。

來源

2015-04-26 Thinkerer

http://jsfiddle.net/7fnfb95v/ –

@JaredFarrish我用'位置打得很好的解決方案：fixed'但不能像你一樣拉它 –

@JaredFarrish謝謝你的好回答！爲我節省了幾個小時的時間！ – Thinkerer

你太親近了。只需添加left:0和right:0但不加頂部位置：

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

fiddle

來源

2015-04-27 11:59:15

如何將一個登錄框水平居中放置在頁面底部？

回答

相關問題