CSS Merkezleme konusunda ustalaşalım

CSS’de bir şeyleri ortalamayı genel bir problem olarak ele alabiliriz. Peki bu yapı neden zor kabul ediliyor? Ben anlamak yerine ezbere gittiğimizi düşünmekteyim :)

Şimdi gelin CSS’de merkezleme konuları baştan sona inceleyelim.

Yatay olarak ortalama #

Satır içi öğeleri, yalnızca aşağıdakilerle blok düzeyinde bir ana öğe içinde yatay olarak ortalayabilirsiniz.

.text-center {
    text-align: center;
}

Kapsayıcı görünüm (display:…) değeri “blok” veya “grid” olmak zorunda. “inline-block” veya “inline-grid” ise belli bir genişliği olması gerekmektedir.
https://www.w3schools.com/cssref/pr_class_display.asp

Türü blok element ise #

margin-left ve margin-right değerlerine auto vererek ortalayabilirsiniz.
Belirli bir genişliğe sahip olması gerekmekte, aksi takdirde tam genişliğe göre ortalanır.

Ortaladığınız blok seviyesi ögenin veya üst öğenin genişliği ne olursa olsun çalışacaktır. Örnek ile anlatalım.

<div class="content">
    <div class="horizontally-center">
        center element
    </div>
</div>

.content {
    height: 100vh;
    width: 100%;
}
.horizontally-center {
    width: 200px;
    margin: 0 auto;
}

Birden fazla blok ögesini yatay ortalama #

Bir satırda yatay olarak ortalanması gereken iki veya daha fazla blok düzeyinde öğeniz varsa display: inline-blok veya flex ile yapabilirsiniz.

inline-blok örneği yapalım.

<div class="d-inline-block-center">
    <div class="content">
        center one
    </div>
    <div class="content">
        center two
    </div>
    <div class="content">
        center three
    </div>
</div>

.d-inline-block-center {
    text-align: center;
}
.d-inline-block-center .content {
    display: inline-block;
}

Elementin mutlak özelliği ile yatay ortalama (Tavsiye edilmez) #

<div class="d-block-absolute-horizontally-center">
    content
</div>

.d-block-absolute-horizontally-center {
    position: absolute;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
}

— Daha anlaşılır olması için: 200px genişliği olan bir nesne düşünelim ve dış kapsayıcısının genişliğinin 800px olduğunu varsayalım. left: 50%; değerini verdiğimiz durumda elementin sol tarafa uzaklığı 400px, sağ tarafa 200px olacaktır :)

X ekseninden -50% diyerek genişliğin yarısı kadar sola yaklaştırıyoruz. (200px-100px) Elementin sol tarafa uzaklığı 50%-100px;

Flex ile yatay ortalama (önerilen) #

<div class="d-flex-horizontally-center">
    content
</div>

.d-flex-horizontally-center {
    display: flex;
    justify-content: center;
}

Grid ile yatay ortalama (önerilen) #

<div class="d-flex-grid-center">
    content
</div>

.d-flex-grid-center {
    display: grid;
    justify-content: center;
}

Dikey olarak ortalama #

Dikey merkezleme, CSS’de biraz daha zordur.

İlk yöntem (tavsiye edilmez) nesneye absolute özelliği kazandırarak bir üst kapsayıcı yüksekliğine göre dikeyde ortalama

Trick bilgi: CSS’de transform: translateY; değeri Y eksenini koordinatına göre (dikey) hesaplamak için kullanılır. -50%; tanımı ise elementin 100% yüksekliğini al ve 50% yukarı uzaklığından çıkar.

Elementin mutlak özelliği ile dikey ortalama (Tavsiye edilmez) #

<div class="d-block-absolute-vertically-center">
    content
</div>

.d-block-absolute-vertically-center {
    position: absolute;
    height: 200px;
    top: 50%;
    transform: translateY(-50%);
}

Flex ile dikey ortalama (önerilen) #

CSS flex property

<div class="d-flex-vertically-center">
    content
</div>

.d-flex-vertically-center {
    display: flex;
    align-items: center;
}

Flex ile kapsayıcı içi elementleri dikeyde ortalamak için elementin mutlak yüksekliğinin olması gerekmekte.

Grid ile dikey ortalama (önerilen) #

CSS flex property

<div class="d-grid-vertically-center">
    content
</div>

.d-grid-vertically-center {
    display: grid;
    align-items: center;
}

Grid ile kapsayıcı içi elementleri dikeyde ortalamak için elementin mutlak yüksekliğinin olması gerekmekte.

Elementin mutlak özelliği ile yatay ve dikey ortalama (Tavsiye edilmez) #

<div class="d-block-absolute-center">
    content
</div>

.d-block-absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translete(-50%, -50%);
}

transform: translate(X, Y);

translateX; değeri X eksenini koordinatına göre (yatay)
translateY; değeri Y eksenini koordinatına göre (dikey)

Flex ile yatay ve dikey ortalama (önerilen) #

<div class="d-flex-center">
    content
</div>

.d-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

CSS justify-content property

CSS align-items property

Grid ile yatay ve dikey ortalama (önerilen) #

<div class="d-grid-center">
    content
</div>

.d-grid-center {
    display: flex;
    place-content: center;
}

CSS Grid Container

Grid hakkında detaylı anlatım için Fatih Hayrioğlu’nun kaleme aldığı “Grid hizalama ve sıralama işlemleri” makalesine göz atabilirsiniz.