在包装中的中心表单
这个问题在这里已经有了答案：
添加margin:auto到您的表单标签将解决你想要的。
.newsletter {
background: none;
}
.newsletter form {
max-width: 720px;
}
.newsletter .newsletter__label {
display: inline-block;
font-family: 'Josefin Slab' !important;
font-size: 18px;
font-style: normal;
height: 25px;
line-height: 25px;
padding: 2px 0;
position: static;
text-transform: uppercase;
vertical-align: top;
width: auto;
letter-spacing: 1px;
}
.newsletter .newsletter__input {
border: none;
border-bottom: 1px solid #000;
color: #000;
font-size: 17px;
font-style: normal;
margin-left: 5px;
margin-right: 5px;
padding: 0;
vertical-align: bottom;
width: 250px;
text-transform: uppercase;
font-family: Ubuntu !important;
padding: 2px 0;
}
.newsletter .newsletter__input:not(:root:root) {
padding: 0;
}
.input-group-field,
.input-group-btn {
vertical-align: bottom;
width: auto;
padding-top: 5px;
}
.newsletter .input-group .btn,
.newsletter .input-group .btn--secondary,
.newsletter .input-group .input-group-field {
font-family: Ubuntu !important;
}
.newsletter .input-group .input-group-field {
font-family: Ubuntu !important;
height: 25px;
letter-spacing: 1px;
}
.newsletter .input-group .input-group-field:focus {
outline: none;
}
.newsletter .input-group .btn {
border: medium none;
line-height: normal !important;
padding: 0 12px !important;
vertical-align: top;
height: 20px;
margin: 0;
width: auto;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: normal;
font-family: 'Ubuntu', sans-serif;
cursor: pointer;
border: 1px solid transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
background-color: #1c1d1d;
color: #fff;
-webkit-transition: background-color 0.15s ease-out;
-moz-transition: background-color 0.15s ease-out;
-ms-transition: background-color 0.15s ease-out;
-o-transition: background-color 0.15s ease-out;
transition: background-color 0.15s ease-out;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 300;
font-size: 13px !important;
}
.newsletter .input-group .btn:hover {
opacity: 0.8;
}
.newsletter .newsletter__input::-webkit-input-placeholder {
color: #cbcbcb;
opacity: 0.5;
}
.newsletter .newsletter__input:-moz-placeholder {
color: #cbcbcb;
opacity: 0.5;
}
.newsletter .newsletter__input::-moz-placeholder {
color: #cbcbcb;
opacity: 0.5;
}
.newsletter .newsletter__input:-ms-input-placeholder {
color: #cbcbcb;
opacity: 0.5;
}
.newsletter .newsletter__input::-ms-input-placeholder {
color: #cbcbcb;
opacity: 0.5;
}
.newsletter .input-group-field,
.newsletter .input-group-btn {
display: inline-block;
vertical-align: top;
}
#mc-embedded-subscribe-form {
margin:auto
} <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Josefin+Slab:400,700">
<div class="row">
<div class="col-md-12 centered">
<div class="newsletter">
<div class="wrapper">
<form id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" target="_blank">
<div class="newsletter--form">
<div class="input-group">
<label class="newsletter__label hidden-label" for="Email">Join our Family For Updates</label>
<input class="input-group-field newsletter__input" id="Email" name="EMAIL" placeholder="Email Address" type="email" value="">
<span class="input-group-btn">
<button type="submit" class="btn newsletter__submit" name="subscribe" id="Subscribe">
<span class="newsletter__submit-text--large">SUBSCRIBE</span>
<span class="newsletter__submit-text--small">
<span class="icon icon-arrow-right" aria-hidden="true"></span>
</span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>您应该将宽度而不是最大宽度添加到表单元素，可以是固定的，也可以是百分比。 还需要添加'margin：auto'
例如：
.newsletter form{
width: 30%;
margin: auto;
}
将margin auto添加到您的表单声明中：
.newsletter form {
max-width: 720px;
margin: auto;
}