wyrównaj w pionie do środka w <div>

Chcę, aby wysokość #abc divat 50pxi tekst były wyrównane w pionie na środku div.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Możesz użyć line-height: 50px;, nie będziesz vertical-align: middle;tam potrzebować .

Próbny

Powyższe nie powiedzie się, jeśli masz wiele linii, więc w takim przypadku możesz zawinąć tekst za pomocą spani, a następnie użyć display: table-cell;i display: table;wraz z vertical-align: middle;, nie zapomnij również użyć width: 100%;dla#abc

Próbny

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

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

Innym rozwiązaniem, które przychodzi mi do głowy, jest użycie transformwłaściwości translateY()gdzie Yoczywiście oznacza oś Y. To całkiem proste ... Wszystko, co musisz zrobić, to ustawić pozycję elementów na absolutei później pozycję 50%od topi przesunąć od osi z ujemnym-50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Próbny

Pamiętaj, że nie będzie to obsługiwane w starszych przeglądarkach, na przykład IE8, ale możesz utworzyć IE9 i inne starsze wersje przeglądarek Chrome i Firefox, używając -ms, -mozi-webkit odpowiednio prefiksów .

Więcej informacji na temat transformmożna znaleźć tutaj .

To proste: podaj rodzicowi div:

display: table;

i daj dziecku element (y) div:

display: table-cell;
vertical-align: middle;

Otóż ​​to!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

Stare pytanie, ale obecnie CSS3 sprawia, że ​​wyrównanie w pionie jest naprawdę proste !

Po prostu dodaj do #abcnastępującego css:

display:flex;
align-items:center;

Proste demo

Oryginalne demo pytania zostało zaktualizowane

Prosty przykład:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

Znalazłem to rozwiązanie autorstwa Sebastiana Ekströma. Jest szybki, brudny i działa naprawdę dobrze. Nawet jeśli nie znasz wzrostu rodzica:

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

Przeczytaj cały artykuł tutaj .

Możesz użyć Wysokość linii równą wysokości elementu div. Ale dla mnie najlepszym rozwiązaniem jest to ->position:relative; top:50%; transform:translate(0,50%);

Co powiesz na dodanie line-height?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

Skrzypce, wysokość linii

Albo paddingdalej #abc. To jest wynik z dopełnieniem

Aktualizacja

Dodaj w swoim CSS:

#abc img{
   vertical-align: middle;
}

Wynik . Mam nadzieję, że tego szukasz.

Spróbuj tego:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

Inna metoda centrowania div:

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

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

Użyj właściwości translateY CSS, aby wyśrodkować tekst w jego kontenerze w pionie

<style>
.centertext{

    position: relative;
    top: 50%;
    transform: translateY(40%);

}
</style>

A następnie zastosuj go do zawierającego DIV

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

Dostosuj wartość procentową translateY do swoich potrzeb. Mam nadzieję że to pomoże

Ten kod dotyczy pionowego wyrównania do środka i poziomego wyśrodkowania bez określania stałej wysokości:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}