How do I center my group of div's

HTML-CSS
1

I have a some DIVS within a div. How do I center these DIVS in the middle of the screen.

<div class="center">
          <div class="property-card">
            <div class="property-image">
              <div class="property-image-title">
              </div>
            </div>
            <div class="property-description">
              <h3> Leadership </h3>
              <p>Grow your leadership skills in this team.</p>
            </div>
          </div>
          
           <div class="property-card">
           <div class="property-image2">
             <div class="property-image-title">
             </div>
           </div>
           <div class="property-description">
             <h3> Environment </h3>
             <p>Help our blue planet bcome abetter place to live in.</p>
           </div>
         </div>
         
         <div class="property-card">
           <div class="property-image3">
             <div class="property-image-title">
             </div>
           </div>
           <div class="property-description">
             <h3> People </h3>
             <p>Help other people that deserve better lives get better lives.</p>
           </div>
         </div>
       </div>


* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


.center {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.property-card {
  margin: 10px;
  height:18em;
  width:14em;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  position:relative;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius:16px;
  overflow:hidden;
  -webkit-box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
  box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}

.property-image {
  height:6em;
  width:14em;
  padding:1em 2em;
  position:Absolute;
  top:0px;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-image:url('pic/leader.png');
  background-size:cover;
  background-repeat:no-repeat;
}

.property-image2 {
  height:6em;
  width:14em;
  padding:1em 2em;
  position:Absolute;
  top:0px;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-image:url('pic/globe-icon.svg');
  background-size:cover;
  background-repeat:no-repeat;
}

.property-image3 {
  height:6em;
  width:14em;
  padding:1em 2em;
  position:Absolute;
  top:0px;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-image:url('pic/helping-hand-icon-png-23.png');
  background-size:cover;
  background-repeat:no-repeat;
}

.property-description {
  background-color: #FAFAFC;
  height:12em;
  width:14em;
  position:absolute;
  bottom:0em;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 0.5em 1em;
  text-align:center;
}

.property-card:hover .property-description {
  height:0em;
  padding:0px 1em;
}
.property-card:hover .property-image, .property-image2, .property-image3 {
  height:18em;
}

.property-card:hover .property-social-icons:hover{
  background-color:blue;
  cursor:pointer;
}
2

maybe check this article

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.