Centrare verticală în CSS

Centrare verticală

Ca să centrezi ceva vertical în CSS, folosește o tehnică modernă de layout precum Flexbox sau Grid, ori poziționarea cu transformări.

Centrare cu Flexbox

Un container flex CSS își poate centra elementele atât orizontal, cât și vertical.

Cele două proprietăți pe care le setezi pe container sunt justify-content și align-items. Dă-le amândurora valoarea center și elementele sunt centrate pe fiecare axă.

Exemplu

Centrează textul atât orizontal, cât și vertical, în interiorul unui container folosind flexbox. Containerul trebuie să aibă display: flex, justify-content: center, align-items: center, height 200px și un border 3px solid green. Afișează „Sunt centrat vertical și orizontal.”

> Output: complete HTML page

Prompt

Centrează textul atât orizontal, cât și vertical, în interiorul unui container folosind flexbox. Containerul trebuie să aibă display: flex, justify-content: center, align-items: center, height 200px și un border 3px solid green. Afișează „Sunt centrat vertical și orizontal.”

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center with Flexbox</title>
<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center with Flexbox</h2>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Centrare cu Grid

Un container CSS Grid poate face același lucru, centrând elementele pe ambele direcții.

Aici este suficientă o singură proprietate: cu place-items setată la center pe containerul grid, elementele sunt centrate pe fiecare axă.

Exemplu

Centrează textul atât orizontal, cât și vertical, în interiorul unui container folosind CSS Grid. Containerul trebuie să aibă display: grid, place-items: center, height 200px și un border 3px solid green. Afișează „Sunt centrat vertical și orizontal.”

> Output: complete HTML page

Prompt

Centrează textul atât orizontal, cât și vertical, în interiorul unui container folosind CSS Grid. Containerul trebuie să aibă display: grid, place-items: center, height 200px și un border 3px solid green. Afișează „Sunt centrat vertical și orizontal.”

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center with Grid</title>
<style>
.center {
  display: grid;
  place-items: center;
  height: 200px;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center with Grid</h2>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Centrare cu position și transform

Când dimensiunile elementului sunt necunoscute sau dinamice, combină position: absolute cu transform: translate() pentru a-l centra.

Exemplu

Centrează un paragraf atât orizontal, cât și vertical, în interiorul unui container folosind position: absolute și transform: translate(-50%, -50%). Containerul trebuie să aibă poziție relative, height 200px și un border 3px solid green. Paragraful folosește top: 50%, left: 50% și transform: translate(-50%, -50%).

> Output: complete HTML page

Prompt

Centrează un paragraf atât orizontal, cât și vertical, în interiorul unui container folosind position: absolute și transform: translate(-50%, -50%). Containerul trebuie să aibă poziție relative, height 200px și un border 3px solid green. Paragraful folosește top: 50%, left: 50% și transform: translate(-50%, -50%).

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center with Position and Transform</title>
<style>
.container {
  position: relative;
  height: 200px;
  border: 3px solid green;
}

.container p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Center with position and transform</h2>

<div class="container">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>