figure on the center of its parent element using CSS-CodePudding

Trying to center the figure i.e .c-yellow , .c-blue but it didn't got center vertically. I need to center horizontally and vertically both:

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.clearfix::after {
  clear: both;
  content: "";
  display: table;
}

.container {
  width: 500px;
  height: 500px;
  margin: auto;
  margin-top: 80px;
  cursor: pointer;
  /* border: 1px solid black; */
}

.container-row1,
.container-row3 {
  width: 100%;
  height: 40%;
}

.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
  height: 100%;
  width: 40%;
}


}
.row1-col1,
.row1-col2,
.row1-col3,
.row2-col1,
.row2-col2,
.row2-col3,
.row3-col1,
.row3-col2,
.row3-col3 {
  float: left;
}
.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.row1-col1-child,
.row1-col3-child,
.row3-col1-child,
.row3-col3-child {
  width: 70%;
  height: 70%;
}
.row1-col1-child>div,
.row1-col3-child>div,
.row3-col1-child>div,
.row3-col3-child>div {
  width: 35%;
  height: 35%;
  float: left;
  margin: 7.5%;
  /* box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22); */
  
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.row1-col1-child>div:hover,
.row1-col3-child>div:hover,
.row3-col1-child>div:hover,
.row3-col3-child>div:hover {
  box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
}
.row1-col2>div,
.row3-col2>div {
  width: 33.333%;
  height: 16.667%;
  float: left;
  border: 1px solid black;
}
.yellow {
  background-color: #f6c700;
}
.white {
  background-color: #fff;
}
.card {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.card:hover {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.c-yellow {
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  height: 90%;
  width: 90%;
  border-radius: 50%;
  height: 90%;
  width: 90%;
  background: rgb(246, 243, 0);
  background: radial-gradient(circle, rgba(246, 243, 0, 1) 5%, rgba(246, 243, 0, 1) 100%);
  box-shadow: 1px 1px #888888;
}
.c-blue {
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  height: 90%;
  width: 90%;
  border-radius: 50%;
  height: 90%;
  width: 90%;
  background: rgb(0, 243, 243);
  background: radial-gradient(circle, rgba(0, 243, 243, 1) 5%, rgba(0, 243, 243, 1) 100%);
  box-shadow: 1px 1px #888888;
}

<!DOCTYPE html>
<html>

<body>
  <div >

    <!-- First row -->
    <div >

      <div >
        <div >
          <div >
            <figure >
              <figure ></figure>
            </figure>
          </div>

        </div>
      </div>
    </div>

  </div>


</body>

</html>

Trying to center the figure i.e .c-yellow , .c-blue but it didn't got center vertically. I need to center horizontally and vertically both.

Trying to center the figure i.e .c-yellow , .c-blue but it didn't got center vertically. I need to center horizontally and vertically both:

CodePudding user response：

please use the below code to center vertically and horizontally

.yellow {
    display: flex;
    align-items: end;
    justify-content: center;
}
.c-yellow {
    display: flex;
    align-items: center;
}

CodePudding user response：

I added to .card, .row1-col1-child,.row1-col3-child,.row3-col1-child,.row3-col3-child ,.container-row1,.container-row3 classes

display: flex;
align-items: center;
justify-content:center;

css:

<style>
        *,
        *:before,
        *:after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
    
        .clearfix::after {
          clear: both;
          content: "";
          display: table;
        }
    
        .container {
          width: 500px;
          height: 500px;
          margin: auto;
          margin-top: 80px;
          cursor: pointer;
          /* border: 1px solid black; */
        }
    
        .container-row1,
        .container-row3 {
          width: 100%;
          height: 40%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        .row1-col1,
        .row1-col3,
        .row3-col1,
        .row3-col3 {
          height: 100%;
          width: 40%;
        }
    
    
        .row1-col1,
        .row1-col2,
        .row1-col3,
        .row2-col1,
        .row2-col2,
        .row2-col3,
        .row3-col1,
        .row3-col2,
        .row3-col3 {
          float: left;
        }
        .row1-col1,
        .row1-col3,
        .row3-col1,
        .row3-col3 {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .row1-col1-child,
        .row1-col3-child,
        .row3-col1-child,
        .row3-col3-child {
          width: 70%;
          height: 70%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .row1-col1-child>div,
        .row1-col3-child>div,
        .row3-col1-child>div,
        .row3-col3-child>div {
          width: 35%;
          height: 35%;
          float: left;
          margin: 7.5%;
          /* box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22); */
          
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
          transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        }
        .row1-col1-child>div:hover,
        .row1-col3-child>div:hover,
        .row3-col1-child>div:hover,
        .row3-col3-child>div:hover {
          box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
        }
        .row1-col2>div,
        .row3-col2>div {
          width: 33.333%;
          height: 16.667%;
          float: left;
          border: 1px solid black;
        }
        .yellow {
          background-color: #f6c700;
        }
        .white {
          background-color: #fff;
        }
        .card {
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
          transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .card:hover {
          box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
        }
        .c-yellow {
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 50%;
          height: 90%;
          width: 90%;
          border-radius: 50%;
          height: 90%;
          width: 90%;
          background: rgb(246, 243, 0);
          background: radial-gradient(circle, rgba(246, 243, 0, 1) 5%, rgba(246, 243, 0, 1) 100%);
          box-shadow: 1px 1px #888888;
        }
        .c-blue {
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 50%;
          height: 90%;
          width: 90%;
          border-radius: 50%;
          height: 90%;
          width: 90%;
          background: rgb(0, 243, 243);
          background: radial-gradient(circle, rgba(0, 243, 243, 1) 5%, rgba(0, 243, 243, 1) 100%);
          box-shadow: 1px 1px #888888;
        }
      </style>