BitRouter

CSS

.myclass {
    position:fixed;
    width:400px;
    height:200px;
    margin-left:-200px;
    margin-top:-100px; 
    left:50%;
    top:50%;
}

JS

var widthDevice = $(window).width(),
      heightDevice = $(window).height();
var widthMain = $('.myclass').width(),
      heightMain = $('.myclass').height();
$('.myclass').css({
  'left': widthDevice - (widthMain  / 2)
//...
});

Google, запрос: Flexbox css

<style>
* {margin:0;padding:0}
.rowbox {
     display:flex;
     flex-wrap:wrap;
     justify-content:flex-start
}
.col {
     box-sizing:border-box;
     border:1px solid #333;
     width:calc(100% / 5);
     height:100px;
}
</style>
<div class="rowbox">
  <div class="col">Logo</div>
  <div class="col">Logo</div>
  <div class="col">Logo</div>
  <div class="col">Logo</div>
  <div class="col">Logo</div>
  <div class="col">Logo</div>
  <div class="col">Logo</div>
  <div class="col">Logo</div>
  <div class="col">Logo</div>
  <div class="col">Logo</div>
  <div class="col">Logo</div>
</div>

присоединяюсь к вышеуказанному ответу, со своего опыта:
"сетка" страницы: px / через calc(% +/- px)
шрифты однозначно em, но западные товарищи так же используют pt
сам адаптив - вариантов реализации на самом деле масса, и можно из полностью фиксированных позиций прописать адаптив, но для облегчения проще @media

em - удобен при работе с шрифтами, поскольку он не фиксированный, а относительный размер задает.
с em можно контролить размеры дочернего контента манипулируя из родителя