title: How do I set the offset of a div from the top of an outer div to be the same as the offset from the side of the outer div using only css?
body: <p>So I made a mockup of what I want to do so it's easier to understand. I have an outer div that takes up 33% of the page and an inner div that has a width of 50% (of the outer div). The outer div has a "text-align: center;" style so the space on each side of the inner div is 25% the width of the outer div. I want to offset the inner div from the top of the page so it is the same distance from the top as from the sides. Most of the responses to similar questions advise using jquery, but I would prefer to use a css-only solution if there is one. How can i do this?</p>
  
  <p>I apologize if this is a basic question. I am inexperienced with frontend and I couldn't find any way of setting CSS attributes equal to the values of other attributes.</p>
  
  <p>Any help would be appreciated!</p>
  
  <p>The CSS:</p>
  
  <pre><code>    .side{
          background-color: #ECEFF1;
          height: 100%;
          width: 33%;
          text-align: center;
  
      }
  
      .profpic{
          width: 50%;
          border-radius: 50%;
          position: relative;
  
      }
  </code></pre>
  
  <p>The Html:</p>
  
  <pre><code>        &lt;div class="side mdl-shadow--4dp" &gt;
              &lt;image class="profpic mdl-shadow--4dp" src="/profpic.jpg"&gt;&lt;/image&gt;
  
          &lt;/div&gt;
          &lt;div class="content"&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/iPRSI.png" alt="mockup"></p>