CSS only, vertical & horizontal centering methods
Centering with table
- [-] .wrap needs a set width
- [-] uses table-layout
- [+] works everywhere also legacy browsers like IE8+
- [+] .inner width/height scales .wrap nicely with the content
- [!] conisder wrapping '.wrap' with a
display:table, width: 100%, table-layout: fixed
for better perf, and auto-width
Centering with inline-block
- [-] font-size should be set on .inner explicitly
- [+] works for unknown dimensions of both .wrap and .inner
- [+] awesome browser support
- [+] .inner width/height scales .wrap nicely with the content
Centering with flexbox
- [+] did not find any drawbacks with this method yet
- [+] no styles needed on the inner element
- [+] works in all modern browser
- [-] Does not work in pre flex-box borwser
Centering with grid
- [+] minimal markup
- [+] no styles needed on the inner element
- [~] works in most modern browsers
- [-] Does not work in pre grid borwser
Centering with posabs
- [+] works everywhere
- [-] need to specify the .inner width and height
- [-] .wrap will not scale when .inner grows