Ekranın Ortasına Div Yerleştirme

Bazen bir resmi yada bir nesneyi ekranın ortasına yerleştirmek isteyebilirsiniz. Bu yazıda size bir div nesnesini ekranın ortasına nasıl yerleştireceğinizi göstereceğim. Bu basit yöntemle istediğiniz bütün nesneleri ekranın yada başka bir nesnenin (div içinde div ortalama) içine rahatlıkla yerleştirip ortalayabilirsiniz.

Ekranın ortasına div yerleştirme

Ekranın ortasına bir nesneyi yerleştirmek için body nesnesini flex nesnesi yapıp içindeki öğleri yatayda ve dikeyde hizlayanilirsiniz.


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .kutu{
            width: 200px;
            height: 200px;
            font-size: 30px;
            line-height: 200px;
            text-align: center;
            background-color: #0984e3;
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="kutu">Merhaba</div>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

body{

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.kutu{

width: 200px;

height: 200px;

font-size: 30px;

line-height: 200px;

text-align: center;

background-color: #0984e3;

color:#fff;

}

</style>

</head>

<body>

<div class="kutu">Merhaba</div>

</body>

</html>

Div içinde div ortalama

Div içinde de başka bir nesneleri ortalayabilirsiniz. aşağıdaki örnekte bir div içinde başka bir div nesnesini ortalamayı göreceksiniz.


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <style>
        .flex-container{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
            width: 500px;
            background-color: #636e72;
        }
        .kutu{
            width: 200px;
            height: 200px;
            font-size: 30px;
            line-height: 200px;
            text-align: center;
            background-color: #0984e3;
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="flex-container">

        <div class="kutu">Merhaba</div>
    </div>
</body>
</html>