Bloku həm üfüqi, həm də şaquli olaraq necə mərkəzləşdirmək olar?

Flexbox:

• Valide edən valide:

  .parent {
    display: flex; // Flex konteynerini aktivləşdiririk
    justify-content: center; // Üfüqi mərkəzləşdirmə
    align-items: center; // Şaquli mərkəzləşdirmə
  }
  

Grid:

• Valide ilə:

  .parent {
    display: grid; // Grid konteynerini aktivləşdiririk
    place-items: center; /* Həm üfüqi, həm də şaquli mərkəzləşdirmə.
                            Eynidir:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute və Transform:

.parent {
  position: relative; // Valide yerləşdirilməlidir
}

.child {
  position: absolute; // Müqəddəs yerləşdirmə
  top: 50%; // Üst sərhədi valideyinlərin %50-ə köçürür
  left: 50%; // Sol sərhədi valideyinlərin %50-ə köçürür
  transform: translate(-50%, -50%); /* Elementi öz genişliyi və hündürlüyünün yarısı qədər köçürür
                                       dəqiq mərkəzləşdirmə üçün */
}

Margin: auto (yalnız üfüqi mərkəzləşdirmə üçün inline-block və block):

.element {
  display: block; // Və ya inline-block
  width: müəyyən-genişlik; // Genişlik təyin olunmalıdır
  margin: 0 auto; // Avtomatik kənar boşluqlar sol və sağ
}