html - CSS - Position an element in percent from its own width -

i position center of element (regardless of height) on bottom of parent. thought i'd go absolute nothing makes sense. see picture below :

<div id="red">     <div id="blue"></div> </div> 

how can have result ?

edit : @gaby aka g. petrioli found solution :

#red{    width: 300px;    height: 200px;    background: red;    position:relative;  }  #blue{    width: 100px;    height: 50px;    background: blue;    right:3%;        /* here magic solution*/    position:absolute;    bottom: 0;    transform: translatey(50%);  }

<div id="red">          <div id="blue"></div>      </div>

you should use absolute position place @ bottom, , use transform translate move 50% upward since work in regard own height.

so

.red{position:relative} .blue{    position:absolute;    top:100%;    right:50px;    transform:translatey(-50%); }