Ինչպե՞ս կարելի է կենտրոնացնել բլոկը հորիզոնտալ և ուղղահայեա:

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; // Ավտոմատ մարկերներ ձախ և աջ
}