Flexbox not aligning all item vertically middle

Question

I’m trying to get everything to be centered inside this grey div. I have Used flexbox which I thought work but then the other content is not slightly in the center except the text - the input form and button are not vertically centered. I assume it could be an external mail chimp styling issue.

Also, I want to control the width of the input box to be a percentage, but it will not allow. However, fixed works.

Why is it not aligning vertically centered? And why can’t I set a percentage width of the box?

#newsletter-wrap {
    width: 100%;
    height: 100px;
    background: lightgrey;
    float: left;
    display: flex;
	justify-content: center;
	align-items: center;
    font-size: 45px;
    font-weight: 300;
}
#newsletter-wrap > *, #newsletter-wrap > form > * {
    display: inline;
    padding: 0;
    margin: 0;
}
#newsletter-button {
    display: inline;
}
#mce-EMAIL {
    background: pink;
    width: 300px; /* want to make it %, not fixed */
}

    <section id="newsletter-wrap">
        Problem.
        
        <form action="https://outsetweb.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&amp;id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>
	<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
    
    </section>

Answer 1

You are using flex to #newsletter-wrap in that case float: left; is not needed. You applied flex to the #newsletter-wrap so the properties will be applied only to its children not the elements inside the child. As far as I know vertical-align: middle; is a property related to Table-cell. It will work but as you are using flex you should only use the properties related to it.

#newsletter-wrap {
  width: 100%;
  height: 100px;
  background: lightgrey;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 45px;
  font-weight: 300;
}

form {
  display: flex;
  align-items: center;
}

#newsletter-button {
  display: inline;
}

#mce-EMAIL {
  background: pink;
  width: 100%;
}

<section id="newsletter-wrap">
  Problem.

  <form action="https://outsetweb.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&amp;id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">

    <div id="mce-responses">
      <div class="response" id="mce-error-response" style="display:none"></div>
      <div class="response" id="mce-success-response" style="display:none"></div>
    </div>

    <input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
  </form>

</section>

Answer 2

One more variant is to add display flex to the form, because form's child elements is not flex elements towards #newsletter-wrap:

#newsletter-wrap {
    width: 100%;
    height: 100px;
    background: lightgrey;
    float: left;
    display: flex;
	justify-content: center;
	align-items: center;
    font-size: 45px;
    font-weight: 300;
}
#newsletter-wrap > *, #newsletter-wrap > form > * {
    display: inline;
    padding: 0;
    margin: 0;
}
#newsletter-button {
    display: inline;
}
#mce-EMAIL {
    background: pink;
    width: 300px; /* want to make it %, not fixed */
}

#mc-embedded-subscribe-form {
    display: flex;
}

   <section id="newsletter-wrap">
        Problem.
        
        <form action="https://outsetweb.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&amp;id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>
	<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
    
    </section>

Answer 3

vertical align: middle would do the trick.

#newsletter-wrap {
  width: 100%;
  height: 100px;
  background: lightgrey;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 45px;
  font-weight: 300;
}

#newsletter-wrap>*,
#newsletter-wrap>form>* {
  display: inline;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

#newsletter-button {
  display: inline;
}


#mce-EMAIL {
  background: pink;
  width: 50%;
  /* want to make it %, not fixed */
}

<section id="newsletter-wrap">
  Problem.

  <form action="https://outsetweb.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&amp;id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    <div id="mce-responses">
      <div class="response" id="mce-error-response" style="display:none"></div>
      <div class="response" id="mce-success-response" style="display:none"></div>
    </div>
    <input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
  </form>

</section>

Answer 4

Add just the following css to align form component vertically, This will solve your issue.

#mc-embedded-subscribe-form{
 vertical-align: middle;
}