Son zamanlarda bu yöntem bir unsuru yatay ve dikey olarak merkezi konumu için kullanılan rastladım oldum. Ancak, bu özellik her ne yaptığını anlamak mümkün değildi. Birisi top:0, bottom:0, left:0, right:0 ayar üzerine etkisi nedir bana açıklayabilir ki?

(Eğer rahip olmayan kimse görev kullanarak açıklar iseniz çok iyi olurdu ya da görsel bir görüntü sağlar.)

Ayrıca, tablo için Görüntü Ayarı ne işe yarar?

.absolute-center {
  position: absolute;
  display: table;
  height: auto;
  width: 500px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: solid 1px red;
}

<p class="absolute-center">What is this sorcery?</p>

düzenlenmiş

Bu css azaltabilir:

.absolute-center {
    position:absolute;
    width: 500px;
    height: 100px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: solid 1px red;
}

<p class="absolute-center">What is this sorcery?</p>

bottom: 0; top: 0; left: 0; right: 0; gibi özellikleri ile absolute öğe tüm alanı dolduracak.

Gizli/burada büyücülük nedir?

Öğenin genişlik ve yüksekliğini tanımlamak. Eğer tüm alanı dolduracak şekilde istiyorsa öyle olsa bile, genişlik ve yükseklik ile sınırlı olacak.

Gizli margin: auto, neden? Eleman dolduracak çünkü marjı ile boşluk kalır. Tanımlanmış genişlik ve yükseklik var çünkü o boyutta olacak ama marj şekilde konteyner/üst geri kalanını dolduracak şekilde auto çalışır, eşit iki taraf bulunur.

margin:auto çünkü genişlik ve yükseklik tanımlı gerekir.