Center parent div vertically based on child element-CodePudding

I am hoping to center my parent div height based on my child div height. My goal is to have 3 boxes with a shorter, but wider rectangle centered vertically behind it. Right now I have my parent div shorter and wider than the children, however I cannot seem to center it vertically.

Here is the ideal outcome:

Here is my current version (Please ignore minor differences with text and box colors). :

.content {
    width: 80%;
    margin: 0px auto;
}


#container .col {
    border: 1px solid #00acd4;
    background-color: white;
    padding-top: 2em;
    padding-bottom: 2em;
    position: relative;
}

#parent {
    background-color: #f0f9fb;
    max-height: 80px;
}

#container {
    margin-top: 50px;
    margin-bottom: 50px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div id="container">
  <div id="parent">
    <div >
      <div >
        <div >

          <h3>$500</h3>
        </div>
        <div >

          <h3>$3500</h3>
        </div>
        <div >

          <h3>50%</h3>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Don't use a negative margin unless absolutely necessary. In this case, it is not. Use flex on parent with align-items: center;

.content {
  width: 80%;
  margin: 0px auto;
}

#container .col {
  border: 1px solid #00acd4;
  background-color: white;
  padding-top: 2em;
  padding-bottom: 2em;
  position: relative;
}

#parent {
  background-color: #f0f9fb;
  max-height: 80px;
  display: flex;
  align-items: center;
}

#container {
  margin-top: 50px;
  margin-bottom: 50px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div id="container">
  <div id="parent">
    <div >
      <div >
        <div >

          <h3>$500</h3>
        </div>
        <div >

          <h3>$3500</h3>
        </div>
        <div >

          <h3>50%</h3>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Without a sketch of what you are trying to do, I believe this is what you are wanting... You can just set a negative margin in the col divs in order to take them outside of the parent...

#container {
  margin-top: 50px;
  margin-bottom: 50px;
}

#parent {
  background-color: #f0f9fb;
}

.content {
  width: 80%;
  margin: 0px auto;
}

#container .col {
  border: 1px solid #00acd4;
  background-color: white;
  padding-top: 2em;
  padding-bottom: 2em;
  position: relative;
  margin-top: -20px;
  margin-bottom: -20px;
}

<div id="container">
  <div id="parent">
    <div >
      <div >
        <div >
          <h3>$500</h3>
        </div>

        <div >
          <h3>$3500</h3>
        </div>

        <div >
          <h3>50%</h3>
        </div>
      </div>
    </div>
  </div>
</div>

Forked your fiddle: https://jsfiddle.net/jstgermain/o6xhL92s/

*** RECOMMEND BELOW SOLUTION ***

@Betsy, I would recommend simplifying your HTML and using flexbox over the previous solution to your fiddle. You will want to make sure your behavior is consistent across browsers and devices. You can use media queries to change the size to eht col items for smaller devices.

#container {
  margin-top: 50px;
  margin-bottom: 50px;
}

#parent {
  background-color: red;
  /*#f0f9fb;*/
  display: flex;
  justify-content: space-evenly;
}

.col {
  border: 1px solid #00acd4;
  background-color: white;
  padding: 1em;
  width: 25%;
  margin: -20px auto;
}

<div id="container">
  <div id="parent">
    <div >
      <h3>$500</h3>
    </div>

    <div >
      <h3>$3500</h3>
    </div>

    <div >
      <h3>50%</h3>
    </div>
  </div>
</div>