How to Align a Div in the Center of Another Div [duplicate] - html

Question

This question already has answers here:
Center div horizontally and vertically inside another div
(2 answers)
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I am trying to make a div sit in the direct center of another div. I tried to use margin: auto; to accomplish this, but the div only aligned in the center horizontally. How can I apply this for a center vertical align?
.topbar {
overflow: hidden;
width: 100%;
height: 50px;
background-color: #131218;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.body {
display: block;
width: 100%;
height: 330px;
background-color: blue;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
img {
height: 50px;
padding: 5px;
border-radius: 200px;
float: left;
will-change: transform;
animation: logofloat 1s ease-in-out infinite alternate;
}
#keyframes logofloat {
from {
transform: translateY(5px);
}
to {
transform: translateY(15px);
}
}
.authdiv {
background-color: red;
height: 200px;
width: 200px;
margin: auto;
}
<div class="topbar">
<img class="logo" src="https://dummyimage.com/50x50/fff/000.png&text=Logo">
</div>
<div class="body">
<div class="authdiv"></div>
</div>

Answer 1

You could use flexbox on your containing element:
.topbar {
overflow: hidden;
width: 100%;
height: 50px;
background-color: #131218;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.body {
display: flex;
flex-flow: column nowrap;
width: 100%;
height: 330px;
background-color: blue;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
img {
height: 50px;
padding: 5px;
border-radius: 200px;
float: left;
will-change: transform;
animation: logofloat 1s ease-in-out infinite alternate;
}
#keyframes logofloat {
from {
transform: translateY(5px);
}
to {
transform: translateY(15px);
}
}
.authdiv {
background-color: red;
height: 200px;
width: 200px;
margin: auto;
}
<div class="topbar">
<img class="logo" src="https://dummyimage.com/50x50/fff/000.png&text=Logo">
</div>
<div class="body">
<div class="authdiv"></div>
</div>

Answer 2

I usually put the element i want to center at 50% from top and 50% from left. Then use translate to pull the element back half it's size. So just add the 4 lines below.
.authdiv {
background-color: red;
height: 200px;
width: 200px;
margin: auto;
position:absolute;
left:50%;
top:50%;
transform:translate(-50% , -50%);
}