Centering divs horizontally within a parent div?

Question

I know this question is being asked frequently but I never seem to fix this in my case, since I am

new in html. I have three divs (boxes: qm, audit, pm) and I want to center them in a parent div

(services).

As seen in photo, the left box is super close to parent div

.services {
    background-color: lightblue;
    display: flex;
    height: 60vh;
    width: 90%;
    margin: auto;
    align-items: center;
    text-align: center;
}
.qm {
    flex: 1;
    position: absolute;
    width: 277px;
    height: 316px;
    left: 86px;
    top: 1037px;
    background: #3C3664;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
}
.audit {
    flex: 1;
    position: absolute;
    width: 276px;
    height: 316px;
    left: 582px;
    top: 1037px;
    background: #FFFFFF;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
}
.pm {
    flex: 1;
    position: absolute;
    width: 276px;
    height: 316px;
    left: 1077px;
    top: 1037px;

    background: #FFFFFF;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    float: right;
}

<div class="services">
            <!-- Quality Management -->
            <div class="qm">
                <h1>
                    Quality Management
                </h1>
            </div>
            <!-- Auditing -->
            <div class="audit">
                <h1>
                    Auditing
                </h1>
            </div>
            <!-- Project Management -->
            <div class="pm">
                <h1>
                    Project Management
                </h1>
            </div>
        </div>

score 1 · Accepted Answer · answered Mar 22 '20 at 21:10

Try with this, just treat the child elements in the context of parent flexbox.

.services {
    background-color: lightblue;
    display: flex;
    height: 70vh;
    width: 90%;
    margin: auto;
    align-items: center;
    text-align: center;
    flex-direction: row;
    justify-content: space-around;
}

.qm {
    height: 70%;
    background: #3C3664;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    padding: 0 1rem;
    width: 20%;
}

.audit {
    height: 70%;
    background: #FFFFFF;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 0 1rem;
    width: 20%;
}

.pm {
    height: 70%;
    background: #FFFFFF;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 0 1rem;
    width: 20%;
}

h1 {
    word-break: break-word;
    font-size: large;
}

<div class="services">
 <!-- Quality Management -->
 <div class="qm">
  <h1>
   Quality Management
  </h1>
 </div>
 <!-- Auditing -->
 <div class="audit">
  <h1>
   Auditing
  </h1>
 </div>
 <!-- Project Management -->
 <div class="pm">
  <h1>
   Project Management
  </h1>
 </div>
</div>

Centering divs horizontally within a parent div?

1 Answers1