ekwiwalent początku transformacji dla pozycji absolutnej

Question

Mam element o nieznanym rozmiarze z position = absolute, top = 1000, left = 1000.

W tej chwili w lewym górnym rogu tego elementu znajduje się pozycja (1000,1000), ale chciałbym, aby środek elementu był (1000,1000).

Czy można to zrobić za pomocą samego CSS?

Answer 1

Jak wskazano w the comments, można po prostu użyć transform: translate(-50%,-50%) w celu wyśrodkowania elementu w pionie/poziomie. Na szczęście ta metoda działa dla wartości dynamicznych, co oznacza, że ​​będzie dobrze działać w twoim przypadku, ponieważ nie znasz szerokości/wysokości elementu.

Na przykład:

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

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

Na co warto, oto some alternative methods do pionowego/poziomego centrowania.