Jak pionowo wyśrodkować divs?

Można to zrobić za pomocą 3 linii CSS i jest kompatybilne z (włącznie) IE9:

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

Przykład: http://jsfiddle.net/cas07zq8/

Kredyt

Możesz pionowo wyrównać div w innym div. Zobacz ten przykład na JSFiddle lub rozważ poniższy przykład.

HTML

<div class="outerDiv">
    <div class="innerDiv"> My Vertical Div </div>
</div>

CSS

.outerDiv {
    display: inline-flex;  // <-- This is responsible for vertical alignment
    height: 400px;
    background-color: red;
    color: white;
}

.innerDiv {
    margin: auto 5px;   // <-- This is responsible for vertical alignment
    background-color: green;   
}

Margines .innerDiv musi być w tym formacie: margin: auto *px;

[Gdzie, * jest pożądaną wartością.]

display: inline-flex JEST OBSŁUGIWANA W najnowszych (zaktualizowanych/aktualnych wersjach) przeglądarkach z obsługą HTML5.

może nie działać w Internet Explorerze :P :)

Zawsze spróbuj zdefiniować wysokość dla dowolnego wyrównanego pionowo div (np. innerDiv), aby przeciwdziałać problemom ze zgodnością.

Jestem dość spóźniony na imprezę, ale sam to wymyśliłem i jest to jeden z moich ulubionych szybkich hacków do wyrównania pionowego. To szalenie proste i łatwe do zrozumienia, co się dzieje.

Używasz atrybutu :before css, aby wstawić div na początek nadrzędnego div, nadajesz mu display:inline-block i vertical-align:middle, a następnie nadajesz te same właściwości potomnemu div. Ponieważ {[5] } służy do wyrównania wzdłuż linii, te wbudowane div będą uważane za linię.

Make the :before div height:100%, a div dziecka będzie automatycznie podążać i wyrównać w środku bardzo wysokiej " linii."

.parent:before, .child {
    display:inline-block;
    vertical-align:middle;
}
.parent:before {
    content:""; // so that it shows up
    height:100%; // so it takes up the full height
}

Oto skrzypce , aby zademonstrować, o czym mówię. Div dziecka może być dowolnej wysokości, i nigdy nie trzeba modyfikować jego marginesy / paddings.
I tutaj jest bardziej objaśniające skrzypce .

Jeśli nie lubisz :before, zawsze możesz ręcznie umieścić div.

<div class="parent">
    <div class="before"></div>
    <div class="child">
        content
    </div>
</div>

A następnie przepisz .parent:before na .parent .before

Jeśli znasz wysokość, możesz użyć pozycjonowania bezwzględnego z ujemnym margin-top w następujący sposób:

#Login {
    width:400px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px; /* width / -2 */
    margin-top:-200px; /* height / -2 */
}

W Przeciwnym Razie nie ma realnego sposobu na wyśrodkowanie div za pomocą CSS

Uznałem tę stronę za przydatną: http://www.vanseodesign.com/css/vertical-centering / To mi się udało:

HTML

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

CSS

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

@GáborNagy komentarz do kolejny post był najprostszym rozwiązaniem, jakie udało mi się znaleźć i zadziałał jak urok dla mnie, ponieważ przyniósł jsfiddle kopiuję go tutaj z małym dodatkiem:

CSS:

#wrapper {
    display: table;
    height: 150px;
    width: 800px;
    border: 1px solid red;
}

#cell {
    display: table-cell;
    vertical-align: middle;
}

HTML:

<div id="wrapper">
    <div id="cell">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>

Jeśli chcesz również wyrównać go poziomo, musisz dodać inny div "wewnętrzna komórka " wewnątrz div" komórka " i nadać mu ten styl:

#inner-cell{
      width: 250px;
      display: block;
      margin: 0 auto;
}

W moim Firefoksie i chrome działa tak:

CSS:

display: flex;
justify-content: center;     // vertical align
align-items: center;         // horizontal align

Wyrównanie pionowe zawsze było trudne.

Tutaj ukryłem jakąś metodę pionowego wyrównania div.

Http://jsfiddle.net/3puHE/

HTML:

<div style="display:flex;">

<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>

<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>

<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>

<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>

</div>

CSS:

em{font-style: normal;font-weight: bold;}
.container {
    width:200px;height:200px;background:#ccc;
    margin: 5px; text-align: center;
}
.content{
    width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}

Http://jsfiddle.net/dvL512e7/

Jeśli wyrównany div nie ma stałej wysokości, spróbuj użyć następującego CSS do wyrównanego div:

{
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: table;
}

I needed to specific min-height

#login
    display: flex
    align-items: center
    justify-content: center
    min-height: 16em

Jeśli używasz fix height div, możesz użyć padding-top zgodnie z potrzebami projektu. lub możesz użyć top: 50%. jeśli używamy div niż wyrównanie pionowe nie działa więc używamy padding top lub position w zależności od potrzeb.

Znalazłem sposób, który działa świetnie dla mnie. Następny skrypt wstawia niewidoczny obraz (taki sam jak bgcolor lub transparant gif) o wysokości równej połowie rozmiaru białej spacji na ekranie. Efektem jest idealne wyrównanie w pionie.

Załóżmy, że masz nagłówek div (height=100) i stopkę div (height=50), a zawartość w głównym div, którą chcesz wyrównać, ma wysokość 300:

<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>"); 
</script>   

Umieszczasz skrypt tuż przed treścią, którą chcesz / align = "left" /

W moim przypadku zawartość, którą lubiłem wyrównywać, to obraz (width = 95%) o proporcjach 100:85 (width:height).Co oznacza, że wysokość obrazu wynosi 85% jego szerokości. A szerokość stanowi 95% szerokości ekranu.

Dlatego użyłem:

var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));

Połącz ten skrypt z

<body onResize="window.location.href = window.location.href;">

I masz gładkie wyrównanie pionowe.

Mam nadzieję, że to działa również dla ciebie!

Centrowanie elementów potomnych w div. Działa dla wszystkich rozmiarów ekranu

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

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

Aby uzyskać więcej informacji, możesz odwiedzić ten link

Najprostszym sposobem na wyśrodkowanie elementu div jest użycie tej klasy z następującymi właściwościami.

.light {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

Próbowałeś tego?

.parentdiv {
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 height: 300px; // at least you have to specify height
}

Hope this helps

Divs nie może być wyrównany pionowo w ten sposób, możesz jednak użyć marginesów lub position:relative, aby zmodyfikować jego położenie.