How to center two items of unknown dimensions in a box
<p>I have a 150px square box. I have two items in it. The width and height of the two items is variable and unknown. The first (<code>.label</code>) I want to be at the top and centered horizontally. The second (<code>.image</code>) I want to be centered both vertically and horizontally. </p>

<p>Here's my attempt using <code>position: absolute</code>:  (<a href="https://jsfiddle.net/Lkx0qp9h/" rel="nofollow">jsfiddle</a>)</p>

<pre><code>.container {
  width: 150px;
  height: 150px;
  position: relative;
}
.label {
  position: absolute;
  width: 100%;
  text-align: center;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
}
</code></pre>

<p>This almost works, except I don't know the width of the image, so I can't adjust to keep it centered.</p>

<p>My attempt with flex box goes wrong as well:</p>

<pre><code>.green {
  width: 150px;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
</code></pre>