შეგიძლიათ მიაწოდოთ მაგალითი, თუ როგორ შეიძლება CSS-ის დახმარებით დივ ელემენტი ცენტრში განთავსდეს გვერდზე?

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;
}

ეს მეთოდი ასევე ცენტრში აყენებს ელემენტს ბრაუზერის ფანჯრის მიხედვით.