问如何基于响应式设计对齐div

EN

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.adv-signup {position: relative; 
   background-image: linear-gradient( #fff, #eff1f1);
   
  width: 100%; height: 400px; }

	
.contents {position: absolute;  width: 1000px; 
 height: 200px; background-color:#2183c2;

}
.contents .bg{
 
  background: #ffffff url("https://s6.postimg.cc/ugw1p1pcx/sprite.png ") no-repeat left top;
   margin:0;
}
.text{
  
   font-family: "Ubuntu"; 
    font-weight: light;
    color:white;
 
     }

.text h3{
 font-weight: bold;
 }
.controls
{
  
}

 .btn
{
  background: #0c5382;
  color:white;
 
}
h3,h1{
    padding: 0px;
    margin: 0px !important;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .adv-signup {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .contents {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .contents {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .contents {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .contents {background: pink;}
}

<div class="adv-signup">
   
        <div class="contents">
          <div class="bg">
                <h1>test</h1>
              </div>
           <div class="text">
                   <h3>Sign up for E-News</h3>
                <p>Leave your email and we’ll send you regular updates on programs, events and news.</p>
            </div>

            <div class="controls">
                <input name="adv-sign-up-email-field" id="adv-sign-up-email-field" type="text" maxlength="255" value="Enter your email" />
                <a href="#" class="btn"> &gt;</a>
            </div>
        </div>
<div>