CSS only, ver­ti­cal & ho­ri­zont­al cen­ter­ing me­thods

see browser shots stackoverflow answer

Centering with table

  1. [-] .wrap needs a set width
  2. [-] uses table-layout
  3. [+] works everywhere also legacy browsers like IE8+
  4. [+] .inner width/height scales .wrap nicely with the content
  5. [!] conisder wrapping '.wrap' with a
    display:table, width: 100%, table-layout: fixed
    for better perf, and auto-width

Centering with inline-block

  1. [-] font-size should be set on .inner explicitly
  2. [+] works for unknown dimensions of both .wrap and .inner
  3. [+] awesome browser support
  4. [+] .inner width/height scales .wrap nicely with the content

Centering with transform

  1. [-] .inner will outgrow .wrap if content is too high
  2. [+] works in all modern browsers
  3. [+] is very nice to center icons & images
  4. [+] does not rely on a parent element

Centering with flexbox

  1. [+] did not find any drawbacks with this method yet
  2. [+] no styles needed on the inner element
  3. [+] works in all modern browser
  4. [-] Does not work in pre flex-box borwser

Centering with grid

  1. [+] minimal markup
  2. [+] no styles needed on the inner element
  3. [~] works in most modern browsers
  4. [-] Does not work in pre grid borwser

Centering with posabs

  1. [+] works everywhere
  2. [-] need to specify the .inner width and height
  3. [-] .wrap will not scale when .inner grows