Text is not centered in div?

September 23, 2022

So I’m kind of a begginner and I just encountered a problem that I don’t know how to solve.

Here is the code:

.parent{
    display: flex;
    flex-wrap: wrap;
    border: #000000 2px solid;
    justify-content: center;
}

.parent div {
    width: 300px;
    height: 50px;
    background-color: rgba(197, 197, 197, 0.788);
    border: #000000 solid 2px;
    border-radius: 10px;
    margin: 10px;
    transition-duration: 3s;
    text-align: center;
    align-items: center;
}

I can’t center the text. I think it has to do with the width and height but it really doesn’t move at all. The text just stays static there at the bottom of the div and doesn’t do anything when I change the div height.

I want the text to be in the center of the div, both horizontally and vertically.

>Solution :

Just add this two properties to your .parent div. Of-course there are lots of ways to do this, but I’m writing answer base on your existing code.

.parent div {
   // your others styles
   display: flex;
   justify-content: center;
}

.parent{
    display: flex;
    flex-wrap: wrap;
    border: #000000 2px solid;
    justify-content: center;
}

.parent div {
    width: 300px;
    height: 50px;
    background-color: rgba(197, 197, 197, 0.788);
    border: #000000 solid 2px;
    border-radius: 10px;
    margin: 10px;
    transition-duration: 3s;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}



.parent div:hover {
   background-color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div class="parent">
    <a>    
      <div><h2>Text</h2></div>
    </a>    
    <div><h2>Text</h2></div>
  </div>
</body>
</html>