Centering Two Child Divs Inside Parent Div

I know this has been discussed in length, but I cannot seem to find an answer to solve this problem. This is a simple example to illustrate my issue. I have two children div elemen

Solution 1:

Add below code to #container:

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

Live Snippet

#container {
    position: relative;
    float: none;
    margin: 0 auto;
    border: solid blue 1px;
    width: 100%;

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

.tile {
    width: 20em;
    height: 40em;
    border:solid black 1px;
    display: inline-block;
    margin: 1.5em 0;
}

<div id="container">
  <div class="tile">
    <!--
   When you remove this comment, the div shifts down and I do not understand what is causing that.
    <h3>This Title Moves the div down. Why?</h3>-->
  </div>
  <div class="tile"></div>
</div>

Solution 2:

You can add: .title { display: block; }

#container {
    position: relative;
    float: none;
    margin: 0 auto;
    border: solid blue 1px;
    width: 100%;
  
}

.tile {
  border: 1px solid black;
  display: block;
  height: 40em;
  margin: 1.5em auto;
  width: 20em;
  text-align:justify;
  padding:7px;
}

h3 {
  margin: 0;
  padding: 0;
}

<div id="container">
  <div class="tile">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  </div>
  <div class="tile">
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  </div>
</div>

Solution 3:

you can add margin:auto to .tile and text-align:center to #container

#container {
    position: relative;
    float: none;
    margin: 0 auto;
    border: solid blue 1px;
    width: 100%;
    text-align: center;
}

.tile {
    width: 20em;
    height: 40em;
    border:solid black 1px;
    display: inline-block;
    margin: auto;
}

<div id="container">
  <div class="tile">
    <h3>This Title Moves the div down. Why?</h3>
  </div>
  <div class="tile"></div>
</div>

Solution 4:

When you use display:inline-block by default was vertical-align: bottom; so that set css for .tile to vertical-align: middle; and text-align:center to #container

.tile {
    width: 20em;
    height: 40em;
    border:solid black 1px;
    display: inline-block;
    margin: 1.5em auto;
    vertical-align: middle;
}

Working Code: https://jsfiddle.net/e8on1cko/5/

Solution 5:

   ` `

#container {
       padding:25%;
       text-align:center;
       background:#e7e7e7;
    }
    
.tile{
       background:white;
       display:inline-block;
       padding:20%;
    }

<div id="container">
  <div class="tile">
    <h3>This Title Moves the div down. Why?</h3>
  </div>
  <div class="tile"></div>
</div>