Tanımlanmış genişlik / yüksekliğe sahip bir div içeriğinin ortasına dikey olarak nasıl hizalanır?

Herhangi bir içeriği tanımlanmış bir genişlik / yükseklikte dikey olarak ortalamak için doğru yöntem nedir div?

Gelen Örneğin farklı yükseklikleri iki içerikleri vardır, dikey hem sınıfını kullanarak merkeze en iyi yolu nedir .content. (ve her tarayıcı için ve çözümü olmadan çalışır table-cell)

Aklınızda bazı çözümler var, ancak diğer fikirleri bilmek istiyorsanız, biri position:absolute; top:0; bottom: 0;ve kullanıyor margin auto.

Bunu biraz araştırdım ve bulduğuma göre dört seçeneğiniz var:

Sürüm 1: Tablo hücresi olarak görüntülenen üst div

display:table-cellÜst div öğenizde kullanmak sizin için sorun değilse , aşağıdaki seçenekleri kullanabilirsiniz:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

Canlı DEMO

Sürüm 2: Görüntüleme bloğu ve içerik görüntüleme tablo hücresine sahip ana div

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

Canlı DEMO

Sürüm 3: Üst div kayan ve görüntü tablo hücresi olarak içerik div

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

Canlı DEMO

Sürüm 4: Mutlak içerik konumu ile göreli üst bölüm konumu

Bu sürümde yaşadığım tek sorun, her özel uygulama için css oluşturmanız gerekecek gibi görünmesidir. Bunun nedeni, içerik div'in metninizin dolduracağı ayarlı yüksekliğe sahip olması gerektiğidir ve kenar boşluğu bundan çıkarılır. Bu konu demoda görülebilir. İçerik div'inizin yükseklik yüzdesini değiştirip -.5 ile çarparak her senaryo için manuel olarak çalışmasını sağlayabilirsiniz.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

Canlı DEMO

Bu display: flex, yalnızca birkaç satır kod kullanılarak da yapılabilir . İşte bir örnek:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

Canlı Demo

Bu çözümü bu makalede buldum

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Elemanın yüksekliği sabit değilse bir cazibe gibi çalışır.

Div içeriğini dikey olarak ortalamanın basit yolu, satır yüksekliğini yükseklik ile aynı olacak şekilde ayarlamaktır:

<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}

ancak bu yalnızca bir metin satırı için geçerlidir!

En iyi yaklaşım, kapsayıcı olarak div ve içinde değer bulunan bir aralıktır:

.cont {
  width: 100px;
  height: 30px;
  display: table;
}

.val {
  display: table-cell;
  vertical-align: middle;
}

    <div class="cont">
      <span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
    </div>

margin: all_four_margin

all_four_margin'e% 50 sağlayarak öğeyi merkeze yerleştirir

style="margin: 50%"

takip etmek için de uygulayabilirsin

kenar boşluğu: üst sağ alt sol

kenar boşluğu: sağ üst ve sol alt

kenar boşluğu: üst ve alt sağ ve sol

uygun% vererek elemanı istediğimiz yerde elde ederiz.