将表格水平对齐底部中心

【问题标题】：Aligning form to bottom center horizontally将表格水平对齐底部中心
【发布时间】：2014-09-26 09:41:04
【问题描述】：

我有一个 mailchimp 表单，我想将它对齐到页面底部的中心（底部有 10 像素的填充）。

我设法让它到达底部，但我不知道如何才能移动到中心。

.mc-field-group{
background-color: #174365;
opacity:0.8;
padding: 0px;
color: #fff;
font-family: Helvetica, Arial;
width:400px;
font-size:12px;
padding-left:10px; 
position: absolute; bottom: 0; left: 0;

}

#mce-EMAIL {
float: left;
margin:10px;  
font-size:12px;
background: transparent;
    }

#mce-FNAME{
margin:10px;
font-size:12px;
background: transparent;
}

#mc_embed_signup input {border:1px solid #fff; -webkit-appearance:none; color:#fff;     text-transform: uppercase; background: transparent; text-indent:2%; color}

#mc_embed_signup .button {clear:both; background-color: #174365; color: #FFFFFF; display: inline-block; font-size:14px;  margin: 11px 5px 5px 0; text-align: center; text-decoration: uppercase; width: auto; border:1px solid #fff; font-size:12px;}

任何人都知道我怎样才能让它粘在页面底部（带有一点填充）？

谢谢！ :)

【问题讨论】：

标签： html css forms alignment

【解决方案1】：

将right:0;、margin-left:auto; 和margin-right:auto; 添加到.mc-field-group

改成这样：

.mc-field-group {
    background-color: #174365;
    opacity:0.8;
    padding: 0px;
    color: #fff;
    font-family: Helvetica, Arial;
    width:400px;
    font-size:12px;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    margin-left:auto;
    margin-right:auto;
}

JSFiddle Demo

附注：

使用text-align:center; 将div 内的内容居中。

另外，margin-left 和 margin-right 属性可以替换为：margin: 0 auto;

【讨论】：