Używanie marginesu: auto do pionowego wyrównania div

Question

Używanie marginesu: auto do pionowego wyrównania div

Więc wiem, że możemy wyśrodkować div poziomo, jeśli użyjemy margin:0 auto;. Czy margin:auto auto; powinno działać tak, jak myślę, że powinno działać? Wyśrodkowując ją pionowo?

Dlaczego vertical-align:middle; też nie 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

80

html css centering

Author: TylerH, 2012-09-14

Source

11 answers

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

Jeśli wyświetlany jest kontener nadrzędny flex, to tak, margin: auto auto (znany również jako margin: auto) będzie działał, aby wyśrodkować go zarówno w poziomie, jak i w pionie, niezależnie od tego, czy jest to element inline lub 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ć bezwzględnie określone, jak w to przykład jfiddle który używa rozmiaru względem viewportu.

Mimo że obsługa przeglądarki dla flexboxów jest na najwyższym poziomie w momencie publikowania, wiele przeglądarek nadal nie obsługuje jej lub nie wymaga prefiksów dostawcy. Zobacz http://caniuse.com/flexbox dla zaktualizowanych informacji o obsłudze przeglądarki.

Update

Ponieważ ta odpowiedź otrzymała trochę uwagi, chciałbym również zwrócić uwagę, że nie trzeba podawać margin w ogóle, Jeśli używasz display: flex i 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>

64

Author: zpr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-25 11:12:07

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

Jeśli masz zadeklarowaną height (height: 1em, height: 50%, itd.) lub jest to element, w którym przeglądarka zna wysokość (img, svg, lub canvas na przykład), wtedy wszystko, czego potrzebujesz do centrowania pionowego, to:

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

Zazwyczaj należy podać width lub max-width, aby zawartość nie rozciągała się na całą długość ekranu / kontenera.

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

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

56

Author: shshaw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-18 15:17:25

Żadne z rozwiązań na tej stronie nie działa (dla mnie).

Moje rozwiązanie

Html

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

CSS

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

14

Author: Gal Margalit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-01 11:18:43

Wiem, że pytanie pochodzi z 2012 roku, ale znalazłem najłatwiejszy sposób 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; 
}

9

Author: Paula Fleck,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-17 17:21:17

Jeśli znasz wysokość div, który chcesz wyśrodkować , możesz umieścić go absolutnie w jego rodzicu, a następnie ustawić wartość top na 50%. To położy górę dziecka div 50% drogi w dół rodzica, tzn. zbyt nisko. Pociągnij go z powrotem, ustawiając jego margin-top na połowę jego wysokości. Więc teraz masz pionowy punkt środkowy dziecka div siedzącego w pionowym punkcie środkowym rodzica-pionowo wyśrodkowany!

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/

7

Author: tuff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-11 13:37:02

Te dwa rozwiązania wymagają tylko dwóch zagnieżdżonych elementów.
First - względne i bezwzględne pozycjonowanie jeśli zawartość jest statyczna (Centrum 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 dla fluid design - dla dokładnego centrum treści użyj poniższego przykładu:

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

Https://jsfiddle.net/GlupiJas/w3jnjuv0/

Musisz ustawić "min-height", jeśli zawartość przekroczy 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 wtedy, gdy grasz z responsywnym projektem.

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

Drugi - jeśli zawartość jest płynna u można również użyć właściwości CSS table I table-cell z wyrównaniem pionowym i wyśrodkowaniem tekstu:

/*in a wrapper*/  
display:table;

Oraz

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

Działa i skaluje się doskonale, często używane jako rozwiązanie do responsywnego projektowania stron 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 tabelkowe do dokładnego centrowania treści, ale w niektórych przypadkach względne pozycjonowanie bezwzględne będzie lepiej działać, zwłaszcza jeśli nie chcemy zachować dokładnej proporcji wyrównania treści.

2

Author: DevWL,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-08 19:22:26

Nie ma jednego łatwego sposobu na wyśrodkowanie div w pionie, który sprawdziłby się w każdej sytuacji.

Istnieje jednak wiele sposobów, aby to zrobić w zależności od sytuacji.

Oto kilka z nich:

ustawienie górnego i dolnego paddingu elementu nadrzędnego na przykład padding: 20px 0px 20px 0px
Użyj tabeli, komórka tabeli Wyśrodkowuje swoją zawartość pionowo
Ustaw pozycję elementu nadrzędnego względem I div, które chcesz wyśrodkować pionowo na absolute i style to jako top: 50px; bottom:50px; na przykład

Możesz również google dla "css vertical centering"

0

Author: hasu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-13 22:42:16

Zmienna wysokość, margines górny i dolny auto

.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ść, margines górny i dolny auto

0

Author: user3668456,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-07 20:21:44

Użycie 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 */
}

Zobacz wynik

0

Author: Daniel G. Blázquez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-24 13:31:40

.black {
    display:flex;
    flex-direction: column;
    height: 200px;
    background:grey
}
.message {
    background:yellow;
    width:200px;
    padding:10px;
    margin: auto auto;
}

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

0

Author: Seetpal singh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-25 10:50:37

score 133 · Accepted Answer

Nie możesz użyć:

vertical-align:middle ponieważ to nie dotyczy elementów blokowych

margin-top:auto i margin-bottom:auto ponieważ ich użyte wartości będą obliczane jako zero

margin-top:-50% ponieważ wartości marży oparte na procentach są obliczane w stosunku do szerokość zawierające blok

W rzeczywistości charakter przepływu dokumentów i algorytmy obliczania wysokości elementów sprawiają, że nie można użyć marginesów do wyśrodkowania elementu pionowo wewnątrz jego rodzica. Za każdym razem, gdy wartość marginesu pionowego zostanie zmieniona, spowoduje to ponowne obliczenie wysokości elementu nadrzędnego( re-flow), co z kolei spowoduje ponowne wyśrodkowanie pierwotnego elementu... czyniąc z niej nieskończoną pętlę.

Możesz użyć:

Kilka obejść jak to które działają dla Twojego scenariusza; trzy elementy muszą być zagnieżdżone jak więc:

.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

JSFiddle działa dobrze zgodnie z przeglądarką.