Sobes.tech
Junior — Middle

Можеш ли да дадеш пример как с помощта на CSS да центрираш елемент div на страницата?

sobes.tech AI

Отговор от AI

За центриране на елемент <div> на страницата с помощта на CSS, има няколко начина. Един от най-простите и универсални е използването на 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;
}

Този метод също центрира елемента спрямо прозореца на браузъра.