Korzystanie z marginesu: auto do wyrównania div w pionie

Wiem więc, że możemy wyśrodkować element div w poziomie, jeśli użyjemy margin:0 auto;. Powinien margin:auto auto;działać tak, jak myślę, że powinien działać? Centrowanie również w pionie?

Dlaczego też nie vertical-align:middle;działa?

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

JSFiddle

Zaktualizuj sierpień 2020 r

Chociaż poniżej warto przeczytać przydatne informacje, od jakiegoś czasu mamy Flexbox, więc po prostu użyj go, zgodnie z tą odpowiedzią .

Nie możesz użyć:

vertical-align:middleponieważ nie ma zastosowania do elementów blokowych

margin-top:autoi margin-bottom:autoponieważ ich używane wartości byłyby obliczane jako zero

margin-top:-50%ponieważ procentowe wartości marginesów są obliczane w odniesieniu do szerokości bloku zawierającego

W rzeczywistości charakter przepływu dokumentów i algorytmy obliczania wysokości elementu uniemożliwiają użycie marginesów do wyśrodkowania elementu w pionie wewnątrz jego elementu nadrzędnego. Za każdym razem, gdy wartość marginesu pionowego zostanie zmieniona, spowoduje to ponowne obliczenie wysokości elementu nadrzędnego (ponowne przepływ), co z kolei spowoduje ponowne wyśrodkowanie oryginalnego elementu ... czyniąc go nieskończoną pętlą.

Możesz użyć:

Kilka podobnych obejść, które działają w Twoim scenariuszu; trzy elementy muszą być zagnieżdżone w następujący sposób:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

Według Browsershot JSFiddle działa dobrze.

Ponieważ to pytanie zostało zadane w 2012 roku i przeszliśmy długą drogę dzięki obsłudze flexboxów przez przeglądarki, czułem, że ta odpowiedź jest obowiązkowa.

Jeśli wyświetlanie kontenera nadrzędnego to flex, to tak , margin: auto auto(znanego również jako margin: auto) będzie działać, aby wyśrodkować go zarówno w poziomie, jak iw pionie, niezależnie od tego, czy jest to element inlineczy block.

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}

<div id="parent">
    <div id="child">hello world</div>
</div>

Zauważ, że szerokość / wysokość nie muszą być określane absolutnie, jak w tym przykładzie jfiddle, który używa rozmiaru w stosunku do widocznego obszaru.

Chociaż wsparcie przeglądarek dla flexboxów jest na najwyższym poziomie w momencie publikowania, wiele przeglądarek nadal nie obsługuje tego lub wymaga prefiksów dostawców. Odwiedź http://caniuse.com/flexbox, aby uzyskać aktualne informacje o obsłudze przeglądarek.

Aktualizacja

Ponieważ ta odpowiedź zwróciła trochę uwagi, chciałbym również zwrócić uwagę, że nie musisz marginw ogóle określać, czy używasz display: flexi chcesz wyśrodkować wszystkie elementy w kontenerze:

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}

<div id="parent">
    <div>hello world</div>
</div>

Oto najlepsze rozwiązanie, jakie znalazłem: http://jsfiddle.net/yWnZ2/446/ Działa w Chrome, Firefox, Safari, IE8-11 i Edge.

Jeśli zadeklarowana height( height: 1em, height: 50%, itd.), Albo jest to element, w którym przeglądarka zna wysokość ( img, svglub canvasna przykład), to wszystko, czego potrzebujesz do centrowania pionowego jest to:

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

Zwykle będziesz chciał określić widthlub max-widthtak, aby zawartość nie rozciągała się na całej długości ekranu / kontenera.

Jeśli używasz tego dla modalu, który ma być zawsze wyśrodkowany w widocznym obszarze, nakładając się na inną zawartość, użyj position: fixed;dla obu elementów zamiast position: absolute. http://jsfiddle.net/yWnZ2/445/

Oto bardziej kompletny opis: http://codepen.io/shshaw/pen/gEiDt

Edycja: jest rok 2020, zamiast tego użyłbym flex box.

Oryginalna odpowiedź:

HTML

<body>
  <div class="centered">
  </div>
</body>

CSS

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Wiem, że pytanie pochodzi z 2012 roku, ale znalazłem najłatwiejszą drogę i chciałem się nim podzielić.

HTML:

<div id="parent">
     <div id="child">Content here</div>
</div>

i CSS:

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

Jeśli znasz wysokość elementu div, który chcesz wyśrodkować , możesz ustawić go absolutnie wewnątrz jego elementu nadrzędnego, a następnie ustawić topwartość na 50%. Spowoduje to, że górna część elementu podrzędnego div będzie o 50% niższa od elementu nadrzędnego, czyli będzie za nisko. Pociągnij go z powrotem, ustawiając go margin-topna połowę jego wysokości. Więc teraz masz pionowy punkt środkowy elementu div dziecka znajdujący się w pionowym punkcie środkowym rodzica - wyśrodkowany w pionie!

Przykład:

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

http://jsfiddle.net/yWnZ2/2/

Te dwa rozwiązania wymagają tylko dwóch zagnieżdżonych elementów.
Po pierwsze - pozycjonowanie względne i bezwzględne, jeśli treść jest statyczna (wyśrodkowanie ręczne).

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

lub do projektowania płynnego - zamiast tego użyj poniższego przykładu dla dokładnego centrum treści:

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/GlupiJas/w3jnjuv0/

Musisz ustawić minimalną wysokość na wypadek, gdyby zawartość przekroczyła 50% wysokości okna. Możesz również manipulować tą wysokością za pomocą zapytania o media dla urządzeń mobilnych i tabletów. Ale tylko jeśli bawisz się responsywnym designem.

Myślę, że możesz pójść dalej i użyć prostego skryptu JavaScript / JQuery do manipulowania minimalną lub stałą wysokością, jeśli z jakiegoś powodu jest taka potrzeba.

Po drugie - jeśli zawartość jest płynna, możesz również użyć właściwości CSS tabeli i komórki tabeli z wyrównaniem w pionie i wyśrodkowaniem tekstu:

/*in a wrapper*/  
display:table;   

i

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

Doskonale działa i skaluje się, często używane jako elastyczne rozwiązanie do projektowania witryn internetowych z układami siatki i zapytaniami o media, które manipulują szerokością obiektu.

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

}
.message {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

https://jsfiddle.net/GlupiJas/4daf2v36/

Preferuję rozwiązanie tabelaryczne do dokładnego wyśrodkowania treści, ale w niektórych przypadkach względne pozycjonowanie bezwzględne będzie lepsze, zwłaszcza jeśli nie chcemy zachować dokładnej proporcji wyrównania treści.

Nie ma jednego prostego sposobu wyśrodkowania elementu div w pionie, który wystarczyłby w każdej sytuacji.

Jest jednak na to wiele sposobów w zależności od sytuacji.

Oto kilka z nich:

• Ustaw dopełnienie od góry i dołu elementu nadrzędnego, na przykład dopełnienie: 20px 0px 20px 0px
• Użyj tabeli, komórka tabeli wyśrodkuje zawartość w pionie
• Ustaw względną pozycję elementu nadrzędnego oraz element div, który chcesz wyśrodkować w pionie, na wartość bezwzględną i ustaw styl jako górny: 50px; dół: 50px; na przykład

Możesz także wyszukać w Google hasło „wyśrodkowanie w pionie css”

zmienna wysokość, automatyczne górne i dolne marginesy

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}

<div class="black">
<div class="message">
    This is a popup message.
</div>

zmienna wysokość, automatyczne górne i dolne marginesy

Korzystanie z Flexbox:

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Zobaczyć wynik

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>