Până și programatorii experminetați au cateodata dilema "Cum să centrez acest DIV?". Există mai multe modalități de a centra un div în HTML folosind CSS. Iată câteva metode comune:
1. **Centrare Orizontală și Verticală cu Flexbox:**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrare DIV cu Flexbox</title>
<style>
.container {
display: flex;
justify-content: center; /* Centrare Orizontală */
align-items: center; /* Centrare Verticală */
width: 100vw; /* Lățimea întregii ferestre de vizualizare */
height: 100vh; /* Înălțimea întregii ferestre de vizualizare */
}
.content {
width: 300px; /* Lățimea dorită a conținutului */
height: 200px; /* Înălțimea dorită a conținutului */
background-color: lightgray;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Acesta este un exemplu de div centrat folosind Flexbox.</p>
</div>
</div>
</body>
</html>
```
2. **Centrare Orizontală și Verticală cu Grid:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrare DIV cu Grid</title>
<style>
.container {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
}
.content {
width: 300px;
height: 200px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Acesta este un exemplu de div centrat folosind Grid.</p>
</div>
</div>
</body>
</html>
```
3. **Centrare Orizontală cu Margin:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrare DIV cu Margin</title>
<style>
.container {
width: 300px;
height: 200px;
background-color: lightgray;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /* Jumătate din înălțime */
margin-left: -150px; /* Jumătate din lățime */
}
</style>
</head>
<body>
<div class="container">
<p>Acesta este un exemplu de div centrat folosind Margin.</p>
</div>
</body>
</html>
```
Toate aceste exemple vor centra div-ul în mijlocul paginii, fie orizontal, fie vertical, fie și orizontal și vertical, în funcție de cerințele tale.
Toate drepturile rezervate | 2024