Ciao, Buone Feste anche a te

La proprietà text-align:center viene applicata solo a testo ed elementi a livello inline. Il tuo div è a livello block, per questo motivo tale proprietà non influisce sul suo allineamento ma, dal momento che è ereditaria, influisce sui contenuti inline che sono dentro quel div.

Per allineare orizzontalmente un elemento block, di larghezza definita, puoi impostare il valore auto ai margini laterali:
codice:
margin: 0 auto;
.
Considera comunque che, avendo impostato una larghezza fissa per il body, il div risulterà allineato rispetto a tale larghezza, non alla larghezza totale della finestra del browser (viewport).

Ci sono comunque diverse soluzioni possibili per centrare gli elementi in orizzontale e/o verticale.
Puoi trovare vari riferimenti di guide e tutorial al capitolo "CSS in azione" dei link utili CSS, sotto la voce "Centrare in orizzontale/verticale".

il background image del body: ho notato che se riduco lo zoom, il contenuto del body (div) si riduce sullo schermo, mentre background image non si ristringe proporzionalmente come/con il div
L'elemento body ha dei comportamenti particolari rispetto ad un generico div.

Ora non so quali specifiche siano considerate per questo comportamento ma, in sostanza, quello che sta avvenendo è il fatto che il suo background viene esteso per tutto l'elemento <html>.
Per l'imitare il background solo sul body basta impostare la proprietà background anche per html.

Ad esempio:
codice:
html {
   background: #fff;
}
.


Qui noto qualche mancanza:
codice:
border: black 30px;
Occhio, hai impostato il border per il div ma la forma contratta che hai usato, pur risultando valida, potrebbe essere incompleta. Se non specifichi anche un valore per la sotto-proprietà border-style (necessaria), questo resta "none" di default, per cui non sarà mostrato alcun bordo.

Vedi documentazione:
CSS Shorthand Border Property
CSS border-style Property

Una forma "corretta" potrebbe essere:
codice:
border: 30px solid black;
.


Buon proseguimento