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

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:

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: