html - How to adjust svg in the center of square with the ability to dynamically adjust to screen -

i'm looking way to place svg icon in center of square div , adapt on length(width) , height of dynamic changing c column. want achieve here, in how looks.

as width , height dynamicly changes line-height not suitable in example. looking way center vertical , horizontal in center of div without line-height.

it's okay if flex involved.

i thought add each square width 15% problem height not adjusted.

not sure if iunderstanding correct maybe this, , if don't want "snap down line" when re scaling delete min width , min height.

html:

<div id="wrapper">     <div class="box"></div>     <div class="box"></div>     <div class="box"></div>     <div class="box"></div> </div> 

css:

body{     width: 100%;     height: 100%;        margin 0;     padding 0; }  #wrapper{     width: 100vw;     height: 100vh;     background-color: #ccc; }  .box {     width:20%;     height:20vw;     min-width:100px;     min-height: 100px;     max-width: 200px;     max-height: 200px;     margin:1%;     background:dodgerblue ;     float:left;     background-image: url("http://www.youtube.com/yt/brand/media/image/youtube-icon-dark.png");     background-repeat:no-repeat;     background-size:contain;     background-position: center center; } 

demo