0

I want to center the black div using the align-content center, but it is not getting centered.

.container{
    background-color:red;
    width:100%;
    height:300px;

    flex-wrap: wrap;
    align-content:center;
}

.flex{
    display: flex;
    width:30%;
    height:30px;
    background-color:black;
}

<div class="container">
    <div class="flex"></div>
</div>

enter image description here

https://ibb.co/fXGb6j2

Joundill
  • 6,828
  • 12
  • 36
  • 50
sivan
  • 57
  • 1
  • 6

1 Answers1

0

You assigned the rules wrong. .container needs to have display: flex; not the child of the container. And it has to be justify-content: center; not align-content: center;.

  • justify-content: center; causes the horizontal center
  • align-items: center; causes the vertical center

.container {
  display: flex;
  width: 100%;
  height: 300px;
  justify-content: center;
  align-items: center;
  background-color: red;
}

.flex {
  width: 30%;
  height: 100px;
  background-color: black;
  color: white;
}
<div class="container">
  <div class="flex">I am centered!</div>
</div>
Niklas E.
  • 1,848
  • 4
  • 13
  • 25
  • thanks @Niklas E. Can i center it horizontally also without using margin 0 auto. – sivan Jun 02 '20 at 22:01
  • I updated my answer. If that was helpful and you used this answer to solve your problem, it would be nice if you mark that answer as accepted. Of cause only if you want. – Niklas E. Jun 02 '20 at 22:03