Jak wyrównać w pionie do środka zawartości elementu div o określonej szerokości / wysokości?

Jaka byłaby właściwa metoda wyśrodkowania w pionie dowolnej treści o określonej szerokości / wysokości div.

W tym przykładzie są dwie treści o różnych wysokościach, co jest najlepszym sposobem na wyśrodkowanie obu w pionie przy użyciu tej klasy .content. (i działa dla każdej przeglądarki i bez rozwiązania table-cell)

Masz na myśli kilka rozwiązań, ale chciałbyś poznać inne pomysły, jeden z nich używa position:absolute; top:0; bottom: 0;i margin auto.

Trochę to zbadałem iz tego, co znalazłem, masz cztery opcje:

Wersja 1: nadrzędny element DIV z wyświetlaniem jako komórka tabeli

Jeśli nie masz nic przeciwko używaniu display:table-cellnadrzędnego elementu DIV, możesz skorzystać z następujących opcji:

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

DEMO na żywo

Wersja 2: nadrzędny element DIV z blokiem wyświetlania i komórką tabeli wyświetlającej zawartość

.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;    
}​

DEMO na żywo

Wersja 3: pływający element DIV nadrzędny i element DIV zawartości jako wyświetlana komórka tabeli

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

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

DEMO na żywo

Wersja 4: nadrzędna pozycja DIV względna z bezwzględną pozycją treści

Jedynym problemem, jaki miałem z tą wersją, jest to, że wydaje się, że będziesz musiał utworzyć css dla każdej konkretnej implementacji. Powodem tego jest to, że element div zawartości musi mieć ustawioną wysokość, którą wypełni twój tekst, i na tej podstawie zostanie obliczony górny margines. Ten problem można zobaczyć w demo. Możesz sprawić, by działał ręcznie dla każdego scenariusza, zmieniając% wysokości elementu div zawartości i mnożąc go przez -,5, aby uzyskać wartość górną marginesu.

.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;
}​

DEMO na żywo

Można to również zrobić, używając display: flextylko kilku wierszy kodu. Oto przykład:

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

Live Demo

Znalazłem to rozwiązanie w tym artykule

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

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

Działa jak urok, jeśli wysokość elementu nie jest ustalona.

Prostą sztuczką, aby wyśrodkować zawartość elementu div w pionie, jest ustawienie wysokości wiersza równej wysokości:

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

ale to działa tylko dla jednej linii tekstu!

Najlepszym podejściem jest użycie elementu div jako kontenera i zakresu z wartością w nim:

.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

dostarczenie 50% do all_four_margin spowoduje umieszczenie elementu w środku

style="margin: 50%"

możesz go również zastosować do śledzenia

margines: górny prawy dolny lewy

margines: górny prawy i lewy dolny

margines: górny i dolny prawy i lewy

podając odpowiednie% otrzymujemy pierwiastek tam, gdzie chcemy.