pozisyon mutlak için dönüşüm-esas eşdeğeri

Question

Bilinmeyen büyüklükte bir öğe var = mutute, top = 1000, left = 1000.

Şu anda, bu elemanın sol üst köşesinde (1000,1000) konumlandırılmış, ancak öğenin merkezinin (1000,1000) olmasını isterim.

Bunu tek başına CSS ile yapmanın bir yolu var mı?

Answer 1

the comments'da belirtildiği gibi, öğeyi dikey/yatay olarak ortalamak için transform: translate(-50%,-50%)'u kullanabilirsiniz. Neyse ki, bu yöntem dinamik değerler için çalışır, bu da elemanınızın genişliğini/yüksekliğini bilmediğiniz için sizin durumunuzda iyi çalışacağı anlamına gelir. Örneğin

: Ne olursa olsun için

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

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

, burada yatay/dikey merkezleme için some alternative methods vardır.