JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="circle-wrapper">
        <div id="alligned" >             
            <img id="myimg1" src="http://img-fotki.yandex.ru/get/21/pulsh.1/0_970b_7c0138fc_XL.jpg" />           
        </div>
    </div>    
</div>

CSS

#circle-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    line-height: 300px;
    border-radius: 50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    background-color: red;      
}
#alligned {
    position: relative;
    vertical-align: middle;
    text-align: center;
}

#alligned > img {
   vertical-align: middle;  
}


html, body {
    height: 100%;
    
}

#wrapper {
    width: 100%;
    height: 100%;
    background-color: silver;    
}