html - 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? -

so made mockup of want it's easier understand. have outer div takes 33% of page , inner div has width of 50% (of outer div). outer div has "text-align: center;" style space on each side of inner div 25% width of outer div. want offset inner div top of page same distance top sides. of responses similar questions advise using jquery, prefer use css-only solution if there one. how can this?

i apologize if basic question. inexperienced frontend , couldn't find way of setting css attributes equal values of other attributes.

any appreciated!

the css:

    .side{         background-color: #eceff1;         height: 100%;         width: 33%;         text-align: center;      }      .profpic{         width: 50%;         border-radius: 50%;         position: relative;      } 

the html:

        <div class="side mdl-shadow--4dp" >             <image class="profpic mdl-shadow--4dp" src="/profpic.jpg"></image>          </div>         <div class="content">          </div> 

this can achieved putting these 2 css rules: padding: 25% , width: 50%. center image equally left, top, , right. here code used:

html

<div id="side">     <image src="http://placehold.it/120x120&text=image1" id="box"> </div> 

css

#side {     width: 33.33%;     height: 1000px;     background-color: #474747; }  #box {     width: 50%;     padding: 25%; } 

then jsfiddle if like.

---

edit

to bit more question relevant, op's css be:

.side{     background-color: #eceff1;     height: 100%;     width: 33%; }  .profpic{     width: 50%;     border-radius: 50%;     padding: 25%; }