-1

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Ruturaj Thakur
  • 11

2 Answers2

3

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>
Andy Jakubowski
  • 474
  • 2
  • 4
-1

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>
Edson
  • 1