როგორ შეიძლება ბლოკის ჰორიზონტალურად და ვერტიკალურად ცენტრში განთავსება?

Flexbox:

• მშობელთან:

  .parent {
    display: flex; // აქტივიზირებს ფლექს კონტეინერს
    justify-content: center; // ჰორიზონტალურად ცენტრში
    align-items: center; // ვერტიკალურად ცენტრში
  }
  

Grid:

• მშობელთან:

  .parent {
    display: grid; // აქტივიზირებს გრიდ კონტეინერს
    place-items: center; /* ცენტრში ორივე მიმართულებით.
                            ტოლია:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute და Transform:

.parent {
  position: relative; // მშობელი უნდა იყოს პოზიციონირებული
}

.child {
  position: absolute; // აბსოლუტური პოზიციონირება
  top: 50%; // ზედა კიდე 50%-ზე გადატანა
  left: 50%; // მარცხენა კიდე 50%-ზე გადატანა
  transform: translate(-50%, -50%); /* ელემენტის გადატანა მისი სიგანის და სიმაღლის ნახევარზე
                                       ზუსტი ცენტრისთვის */
}

Margin: auto (მხოლოდ ჰორიზონტალურად ცენტრში inline-block და block):

.element {
  display: block; // ან inline-block
  width: განსაზღვრული-განიშვნა; // სიგანე უნდა იყოს მითითებული
  margin: 0 auto; // ავტომატური მარკერები მარცხნივ და მარჯვნივ
}