როგორ გავასწოროთ HTML ელემენტი ცენტრში

ხშირად დამწყებმა დეველოპერებმა არ იციან, თუ როგორ გამოიყენონ კონკრეტული CSS-ის თვისებები პრაქტიკაში.

საკმაოდ ბევრ სტუდენტს აქვს შეკითხვა, თუ როგორ გაასწოროს ელემენტი ჰორიზონტალურად და ვერტიკალურად ცენტრში, ამისთვის არსებობს 2 მეთოდი.

I - flexbox-ის გამოყენებით

HTML

<div class="box">
  <div class="element"></div>
</div>

CSS

.box {
  width: 300px;
  height: 300px;
  background: #ccc;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.element {
  width: 100px;
  height: 100px;
  background: dodgerblue;
}

II - grid-ის გამოყენებით

.box {
  width: 300px;
  height: 300px;
  background: #ccc;
  margin: auto;
  display:grid;
}
.element {
  width: 100px;
  height: 100px;
  background: dodgerblue;
  margin: auto;
}