Centrare testo o immagini in viewport con CSS3

l’8 gennaio 2016 è Bert Bos in persona ad aggiornarci su come centrare immagini e testo nelle nostre app in html5.
fonte: https://www.w3.org/Style/Examples/007/center.en.html
Centrare è una azione che si fa spessissimo e che purtroppo non è mai stata banale, da quando hanno deprecato il meraviglioso tag CENTER.
Poi centrare orizzontalmente o verticalmente sono due paia di maniche ben differenti.
Quindo l’uso suggerito dal w3c per centrare in entrambi gli assi è:
<code>

<html>
  <style>
    body {
        background: white }
    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
  </style>
  <section>
    <h1>Nicely centered</h1>
    <p>This text block is vertically centered.
    <p>Horizontally, too, if the window is wide enough.
  </section>

</code>
e funziona!