将表格水平对齐到底部中心

Question

I have a mailchimp form that I'd like to align to center at the bottom of a page (with a 10px padding from the bottom).

I managed to get it to the bottom, but I don't see how I can move to the center.

.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;} 

Anyone know how I could get it to stick to the bottom of the page (with a little padding)?

Thanks! :)

Answer 1

Add right:0; , margin-left:auto; and margin-right:auto; to .mc-field-group

Change to this:

.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

PS:

Use text-align:center; to center the content inside the div .

Also, margin-left and margin-right property can be replaced with: margin: 0 auto;