Centrarea elementelor CSS
CSS oferă mai multe metode de centrare, iar cea potrivită depinde de tipul elementului. Elementele pot fi centrate pe orizontală, pe verticală sau în ambele direcții.
Exemplu
Flexbox centrează acest element <div>.
Prompt
Centrați un element div atât pe orizontală, cât și pe verticală, în interiorul unui container, utilizând flexbox. Containerul trebuie să aibă o înălțime fixă (de ex. 300px) și un chenar. Elementul centrat trebuie să afișeze "Sunt centrat pe verticală și pe orizontală." Utilizați justify-content: center și align-items: center.
Rezultat: pagină HTML completă
index.html
<!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: 300px;
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>
Alinierea orizontală
Elementele block pot fi centrate cu margin: auto, iar textul din interiorul elementelor cu text-align: center. Pentru alinierea la stânga sau la dreapta există float și position.
Alinierea verticală
Tehnicile moderne de aspect rezolvă centrarea verticală în mai multe moduri: align-items: center în flexbox, place-items: center în grid și, când dimensiunile unui element sunt necunoscute, position combinat cu transform.
Sfat: Pentru a centra conținutul în ambele direcții, flexbox este alegerea recomandată și cea mai modernă.