flex align-items: center not centering items while using it [duplicate] - html

Question

This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 1 year ago.
Flexbox align-items: center; is not working.
I want to position .container at the center
Here is the code for it, I don't understand why
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
display: flex;
justify-content: center;
align-content: center;
}
.container {
position: relative;
background-color: white;
width: 100%;
max-width: 1000px;
min-height: 100px;
}
<div class="container">
<div class="peronal"></div>
<div class="profess"></div>
</div>

Answer 1

To center your .container, presumably inside a body as big as the browser window, size the body element.
Right now your body element has the default height: auto, which means it will be as tall as the content inside of it. You set min-height: 100px on your .container, so that’s the size of the auto-sized body.
So you’ll want to make your body as big as the browser window, and then center your .container element inside:
body{
margin: 0;
box-sizing: border-box;
min-height: 100vh;
background-color:black;
display:flex;
justify-content:center;
align-items: center;
}
.container{
background-color: white;
max-width: 1000px;
min-height: 100px;
}
.personal {
padding: 24px;
background-color: tomato;
}
.professional {
padding: 24px;
background-color: seagreen;
}
<div class="container">
<div class="personal">a</div>
<div class="professional">b</div>
</div>

Answer 2

if you want to vertically center the parent you need a height
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color:black;
display:flex;
justify-content:center;
align-content:center;
align-items:center;
min-height: 100vh;
}
.container{
position:relative;
background-color: white;
width: 100%;
max-width: 1000px;
min-height: 100px;
}
<div class="container">
<div class="peronal">one</div>
<div class="profess">two</div>
</div>