centering text positioning using flexbox - html

Question

Trying to do a simple website recreation using flexbox. Here is the final goal (for this step):
Pretty simple. But I am struggling with aligning the text. I am able to get the header to center just fine. It's mainly the paragraph underneath that I am having trouble centering. Is there a way to center that paragraph vertically and horizontally to its outer container? New to flexbox and would like any tips! Here is a link to my codepen and relevant code: https://codepen.io/gkunthara/pen/qjympg
HTML
<div class = "content-container">
<h1 class = "main-header"> Connect with Subscribers Effortlessly </h1>
<p class = "sub-header"> Email Marketing Platform for Bloggers &
Authors. </p>
</div>
CSS
.content-container .main-header{
box-sizing: border-box;
font-weight: 600;
font-size: 45px;
height:75px;
padding-left: 5px;
padding-right: 5px;
color: rgb(51, 51, 51);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border-style: solid;
}
.content-container .sub-header {
border-style: solid;
display: flex;
height: 25px;
margin-top: 150px;
}

Answer 1

You just need to do two things.
1. Add
flex-direction: column;
align-items: center;
to your .content-container class.
2. Remove margin-top: 150px from .content-container .sub-header and it should be it.
* {
box-sizing: border-box;
}
.content-container {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
border-style: solid;
margin-top: 15px;
flex-direction: column;
align-items: center;
}
.content-container .main-header {
box-sizing: border-box;
font-weight: 600;
font-size: 30px;
height: 75px;
padding-left: 5px;
padding-right: 5px;
color: rgb(51, 51, 51);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border-style: solid;
}
.content-container .sub-header {
border-style: solid;
height: 25px;
}
<div class="content-container">
<h1 class="main-header"> Connect with Subscribers Effortlessly </h1>
<p class="sub-header"> Email Marketing Platform for Bloggers & Authors. </p>
</div>
Here is the fiddle to play with.
Hope this helps.

Answer 2

If you remove the margin-top in your .content-container .sub-header rule and add flex-direction: column; align-items: center; to your .content-container the text will center properly
Updated codepen
Stack snippet
* {
box-sizing: border-box;
}
.header-container {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: space-between;
padding-left: 50px;
padding-right: 75px;
}
.header-container .logo {
width: 250px;
}
.header-container .logo .sb {
max-width: 100%;
}
.header-container .nav-bar-container {
display: flex;
}
.nav-link {
text-decoration: none;
color: #4B4B4B;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 15px;
}
.content-container {
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-style: solid;
margin-top: 15px;
}
.content-container .main-header {
box-sizing: border-box;
font-weight: 600;
font-size: 45px;
height: 75px;
padding-left: 5px;
padding-right: 5px;
color: rgb(51, 51, 51);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border-style: solid;
}
.content-container .sub-header {
border-style: solid;
display: flex;
height: 25px;
}
/* Resize window to see its effect */
#media( max-width: 700px) {
.header-container {
flex-direction: column;
}
}
<div class="header-container">
<a class="logo"> <img class="sb" src="logo.png" alt="logo"> </a>
<nav class="nav-bar-container">
<a class="nav-link" href="#"> Tour </a>
<a class="nav-link" href="#"> Pricing </a>
<a class="nav-link" href="#"> Medium </a>
<a class="nav-link" href="#"> Sign Up </a>
<a class="nav-link" href="#"> Login </a>
</nav>
</div>
<div class="content-container">
<h1 class="main-header"> Connect with Subscribers Effortlessly </h1>
<p class="sub-header"> Email Marketing Platform for Bloggers & Authors. </p>
</div>
If you intended to center the .content-container .sub-header w/o take the .content-container .main-header into account, you need to position the .content-container .main-header absolute
With this, it will work with or w/o the flex-direction: column;, which I added in the first solution.
Note though, that on less wider screen you need to adjust both, or else they will overlap
Updated codepen
Added these properties to your .content-container .main-header
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;