Kategoriler
Kodlama

Bir div’i ortalamanın tüm yolları

CSS ile bir div’i ortalamak için tüm yöntemler.

Bir div’i veya herhangi bir(display:block; olan) elemanı yatay ve dikey olarak ortalamanın tüm yollarını paylaşacağım.

Daha önce paylaşmış olduğum grid yöntemi aslında en kısa ve kullanışlı olan:

CSS ile herhangi bir nesneyi ortalamak: Bu tek satır CSS kodu herhangi bir nesneyi dikeyde ve yatayda kolayca ortalayabilir, artık Google’da aramayı bırakabilirsiniz.

Ancak farklı ihtiyaçlar olabilir ve aşağıdaki yöntemleri de kullanabilirsiniz.

CSS ile ortalama yöntemleri

Grid:

.outer-div {
  display: grid;
  place-content: center;
}

veya

.outer-div {
  display: grid;
  align-items: center;
  justify-content: center;
}

veya

.outer-div {
  display: grid;
}

.inner-div {
  align-self: center;
  justify-self: center;
}

Flexbox:

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

veya

.outer-div {
  display: flex;
  justify-content: center;
}

.inner-div {
  align-self: center;
}

Absolute pozisyonu ile:

.outer-div {
  position: relative;
}

.inner-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

veya

.outer-div {
  position: relative;
}

.inner-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

Aşağıdan tümünü deneyebilirsiniz:

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO volkan@volkanyilmaz.com.tr