Bir DIV en kolay nasıl ortalanır?

Geliştiricilerin canını en çok sıkan sorunla karşınızdayız. Bir DIV ya da başka bir nesne sayfaya ya da bulunduğu alana nasıl ortalanır? 🧐

Bunu yapmanın birkaç yolu var; geleneksel yöntemle ve yeni standartlara uygun yöntemlerle ortalama örnekleri sunacağız. Tabii ki SIPA’nın “Az kod çok iş” kuralına uygun bir şekilde. 😎

Haydi başlayalım. 🔥

1. Geleneksel Yöntem (Tablo Görünümü)

HTML:

<div class="centered">
    <div class="inner">
        <div class="content"> 
            <h1>This is the centered DIV</h1>
            <p>Centered method is TABLE | TABLE-CELL views.</p>
        </div>
    </div>
</div>

CSS:

.centered {
    display: table;
    width: 100%;
    height: 100vh; /* set your height */
}
.centered > .inner {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
.centered > .inner > .content {
    width: auto;
    height: auto;
    margin: 0 auto;
    max-width: 35%; /* not required */
    padding: 20px; /* not required */
    background-color: #ccc; /* not required */
}

2. Yenilikçi Yöntem (Flex Görünümü)

Bu yöntemle daha az kod yazdığımızı göreceksiniz. Kodlamanın ana felsefesi bu zaten: Daha az kod, daha az veri aktarımı, daha hızlı uygulamalar.

HTML:

<div class="centered">
    <div class="content"> 
        <h1>This is the centered DIV</h1>
        <p>Centered method is FLEX view.</p>
    </div>
</div>

CSS:

.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* not required */
}
.centered > .content {
    max-width: 35%; /* not required */
    padding: 20px; /* not required */
    background-color: #ccc; /* not required */
}

3. SIPA Yöntemi (Fixed/Relative & Absolute Görünümü)

Bu yöntem daha çok popup pencereler için tercih edilmektedir. Hem RELATIVE hem FIXED nesneler içinde ABSOLUTE nesneler kullanarak ortalama yapabiliriz.

Bu yöntemi kullanarak yazdığımız Flex CSS Popup kodlarını şuradan inceleyebilir ve indirebilirsiniz:
https://sipa.web.tr/flex-css-popup/

HTML:

<div class="centered">
    <div class="content"> 
        <h1>This is the centered DIV</h1>
        <p>Centered method by SIPA :).</p>
    </div>
</div>

CSS:

.centered {
    position: relative; /* or fixed */
    z-index: 1;
    height: 100vh; /* not required */
}
.centered > .content {
    position: absolute;
    z-index: 1;
    inset: 0;
    margin:auto;
    width: max-content;
    height: max-content;
    padding: 20px; /* not required */
    background-color: #ccc; /* not required */
}

Keşfet