How can I vertically center all children of my div using css? - html

Question

Here is my code
.header {
width: 100%;
height: 100px;
background: black;
}
.header .headerContainer {
position: relative;
top: 50%;
transform: translateY(-50%);
height: inherit;
}
img#logo {
height: 75%;
}
p#logotext {
color: white;
display: inline
}
<div class="header">
<div class="headerContainer">
<img src="https://cdn.worldvectorlogo.com/logos/react.svg" alt="Logo" id="logo" />
<p id="logotext">Welcome To Here</p>
</div>
</div>
However, this is not aligning the elements properly.
How should I modify my CSS so that headerContainer does the alignment properly?

Answer 1

You can use flexbox to solve this:
.header {
background: black;
height: 100px;
width: 100%;
}
.header .headerContainer {
align-items: center;
display: flex;
height: inherit;
}
img#logo {
height: 75%;
}
p#logotext {
color: white;
display: inline
}
<div class="header">
<div class="headerContainer">
<img src="https://placehold.it/50x50" alt="Logo" id="logo" />
<p id="logotext">Welcome To Here</p>
</div>
</div>
So you don't need to use position or tranform to vertical center the items. If you want to learn more about flexbox I recommend this site for a quick overview / reference.

Answer 2

Use This Code
<style>
.class{
Position:absolute;
top:50%;
left:50%;
transform:rotateX(-50%,50%);
}
</style>

Answer 3

You can also use CSS Grid.
.header {
background: black;
height: 100%
width: 100%;
padding: 20px;
}
.header .headerContainer {
display: grid;
grid-template-columns: 1fr 1fr;
}
img#logo {
width: auto;
height: auto;
align-self: center;
}
p#logotext {
color: white;
align-self: center;
}
<div class="header">
<div class="headerContainer">
<img src="http://via.placeholder.com/350x150" alt="Logo" id="logo" />
<p id="logotext">Welcome To Here</p>
</div>
</div>

Answer 4

so close .... you just need to put dispaly : flex; into headerContainer
.header {
background: black;
height: 100px;
width: 100%;
}
.header .headerContainer {
align-items: center;
display: flex;
height: inherit;
}
img#logo {
height: 75%;
}
p#logotext {
color: white;
display: inline
}