equivalente trasformatore-origine per posizione assoluta

Question

Ho ottenuto un elemento con dimensione sconosciuta con posizione = assoluto, superiore = 1000, sinistra = 1000.

In questo momento, l'elemento in alto a sinistra di quell'elemento è in posizione (1000,1000) ma vorrei che il centro dell'elemento fosse (1000,1000).

C'è un modo per farlo con il solo CSS?

Answer 1

Come indicato in the comments, è possibile utilizzare semplicemente transform: translate(-50%,-50%) per centrare l'elemento verticalmente/orizzontalmente. Fortunatamente, questo metodo funziona con valori dinamici, il che significa che funzionerà bene nel tuo caso poiché non conosci la larghezza/altezza dell'elemento.

Ad esempio:

.element { 
 
    background: #f00; 
 
    width: 100px; 
 
    height: 100px; 
 
    transform: translate(-50%,-50%); 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
}

<div class="element"></div>

Per quello che vale, qui some alternative methods per centratura verticale/orizzontale.