CSS ile div benzeri bir html elementini sayfanın ortasına yerleştirmenin birkaç farklı yolu vardır.
Margin ile Sadece Yatay Olarak Div Ortalamak
Eğer divi sadece sayfada yatay olarak ortalamak istiyorsanız margin-left: auto ve margin-right: auto css özelliklerini kullanarak div elementini sayfada kolayca ortalayabilirsiniz.
Ancak sadece yatay değil hem yatay hem dikey yani sayfanın tam orta noktasına divi hizalamak istiyorsanız bunun için en yaygın yöntem olan flexbox ile div ortalama yöntemini kullanabilirsiniz.
Flexbox Kullanarak Dikey ve Yatay Olarak Div Ortalamak
Öncelikle display: flex ile flexbox düzeni oluşturmanız gereklidir. Daha sonra justify-content: center ile html elementini yatay olarak ortalayabilirsiniz.
Ayrıca align-items: center kullanarak elementi dikey olarak da sayfanın ortasına konumlandırabilirsiniz. Buna ek olarak height: 100vh kullanmanız ve container yüksekliğini sayfanın tamamına kaplamanız gerekir. Bu sayede element dikey olarak ortalanacaktır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Centering</title>
<style>
.container {
display: flex;
justify-content: center; /* Yatayda ortalar */
align-items: center; /* Dikeyde ortalar */
height: 100vh; /* Sayfanın tamamını kaplar */
background-color: #f2f2f2;
}
.box {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Ortalı Element</div>
</div>
</body>
</html>Sonuç olarak div aşağıdaki gibi görünecektir.
Aklınıza takılanları sormayı unutmayın.
Yorumlar