Կարող եք տալ օրինակ, թե ինչպես CSS-ով կենտրոնացնել div տարր էջում?

CSS օգտագործելով <div> տարրն էջում կենտրոնացնելու համար, կան մի քանի մեթոդներ: Ամենապարզ և ամենահամընդհանուր մեթոդներից մեկը Flexbox- ի օգտագործումն է:

body, html {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  justify-content: center; /* հորիզոնական */
  align-items: center;    /* ուղղահայաց */
  height: 100vh;          /* կոնտեյների բարձրությունը - ամբողջ էկրան */
}

.centered-div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

Եվ HTML-ում:

<div class="container">
  <div class="centered-div">Կենտրոնացված բլոկ</div>
</div>

Այս մեթոդը կենտրոնացնում է ներքին բլոկը էկրանին ինչպես ուղղահայաց, այնպես էլ հորիզոնական ուղղությամբ:

Մյուս մեթոդը օգտագործում է բացարձակ դիրքավորումը և փոխակերպումը:

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: lightcoral;
}

Այս մեթոդն էլ կենտրոնացնում է տարրն ըստ բրաուզերի պատուհանի։