CSS dla początkujących może być trudny. Dla back-end developerów może także być niezrozumiały. Przedstawię parę reguł które ułatwiają życie. 
Nie są to może jakieś powalające przykłady ale warto ich używać. 

1. Jak wyśrodkować w poziomie element używając pozycji absolutnych. 
HTML: 

<section class="outer">
<div class="inner"> Zawartość, obrazek itp. </div>
</section>

 

CSS: 

.outer{
position: relative;
}

.inner{
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
}

 

Możemy użyć tutaj margin-left z wartością ujemną ale jest to tylko przydatne gdy znamy rozmiary "wycentrowanego" elementu. 

 

W pionie wyśrodkowanie robimy na takiej samej zasadzie jak wyżej tylko zmianie ulegają: 

  • top: 50%;
  • transform: translate(0%, -50%);