Issues with alignment when it comes to flex - html

Question

I have two issues with my flex I require assistance resolving. I created a fiddle here to access: https://jsfiddle.net/dmj5yscz/
Issue 1: I am unable to move the elements to the center (see red in screenshot). Tried margin-left:auto and margin-right:auto in various places but no luck. (note: should only happen if width is no more than 1144px)
Issue 2: I want the text to be vertically aligned in the center (any screen width)
Here is the code:
<!-- newsletter section -->
<div class="newsletter_section">
<div class="newsletter_inner_section">
<div class="newsletter_left content-box">
<img src="xxx">
</div>
<div class="newsletter_mobile_col">
<div class="newsletter_center content-box">
<p class="newsletter_text_section">Text1 </p>
</div>
<p class="newsletter_input_section">Text2 </p>
</div>
</div>
</div>
/* newsletter section */
.newsletter_inner_section{
display:flex;
}
.newsletter_gif{
width:150px;
height:auto;
}
.newsletter_left,
.newsletter_center,
.newsletter_right{
display:inline-flex;
}
.newsletter_left{
width:auto;
}
.newsletter_center{
width:100%;
}
.newsletter_right{
width:40%;
justify-content:flex-end;
}
.newsletter_text_section{
color:black !important;
font-size:20px !important;
font-weight:bold;
}
/* Media Newsletter section only */
#media (max-width:1144px){
.newsletter_right,
.newsletter_center{
width:auto;
}
.content-box {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.newsletter_inner_section{
justify-content:center;
display: flex;
flex-direction:row;
}
.newsletter_text_section{
padding-left:15px;
margin-bottom:0;
}
.newsletter_mobile_col {
flex-grow: 1;
display: flex;
flex-direction: column;
}
}
#media (max-width:565px){
.newsletter_inner_section{
flex-direction:column;
}
.newsletter_left{
margin-left:auto;
margin-right:auto;
}
.newsletter_gif{
padding-bottom:20px;
}
}

Answer 1

You have set: flex-grow:1; which is making second flex-div to take available space. Please remove this and it will be center aligned
.newsletter_mobile_col {
/* flex-grow: 1; */
display: flex;
flex-direction: column;
}
And yes, use align-items:center; on flex container to make it center aligned across cross-axis.
#media (max-width: 1144px){
.newsletter_inner_section {
justify-content: center;
display: flex;
flex-direction: row;
align-items: center;/* here */
}
}
And if you want to behaviour on all screens, just write the above CSS outside media query :)

Answer 2

To display flex items into center
Flexbox link
(justify content)
For the second, set another display flex with: flex direction column and center it