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

95

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.

Ricardo Rodrigues
źródło
2
Twoje pytania powinny być w pełni samodzielne. W przeciwnym razie, gdy adres URL zgaśnie, jest bezużyteczny.
Sparky
Prawdopodobnie, ale tym razem nie miałem rozwiązania, którego chcę ... to daje więcej opcji
Ricardo Rodrigues
1
tl; dr w 2020 roku : display: flex; align-items: center;. Jeśli nie chcesz, aby był również wyśrodkowany w poziomie, dodaj flex-direction: column;.
Devin Burke

Odpowiedzi:

131

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

Josh Mein
źródło
@JoshMein: Kilka innych rozwiązań: jak mogę wyśrodkować tekst w pionie w dynamicznie wysokim div
doptrois,
1
Szukam wersji 2, jednak treść nie jest wyśrodkowana w pionie. Czy ma znaczenie, co areajest zawarte w lub jaka contentjest zawartość?
Shimmy Weitzhandler
64

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

martin36
źródło
1
@nihiser Tylko, jeśli chcesz również wyśrodkować go również w poziomie lub jeśli ustawiszflex-direction: column
martin36
32

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.

N Kumar
źródło
1
JFYI, znalazłem ten sam artykuł i zastosowałem to podejście. Musiałem zmienić pozycję na bezwzględną, aby działała w Chrome.
Jack A.
@JackA. działa position: relativew chrome 62. Nie wiem, jak daleko to sięga.
Jared Smith
0

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>
ja-i-viy
źródło
-7

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.

lokesh
źródło
5
proszę wyjaśnić, twoje sformułowanie wydaje się być trochę wszędzie i chaotycznie.
Benjamin Trent
Niejasna odpowiedź ze złym sformułowaniem i ograniczona do listy możliwych wartości margin.
nuno