vertical align middle in

I want to keep the height of #abc div na 50px i tekst wyrównać pionowo w ś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>
Author: Alexander Abakumov, 2013-09-06
Source

11 answers

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

Demo

Powyższe nie powiedzie się, jeśli masz wiele wierszy, więc w takim przypadku możesz zawinąć swój tekst za pomocą span, 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

Demo

#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, o którym tu myślę, jest użycie transform właściwości z translateY() gdzie Y oczywiście oznacza oś Y. To całkiem proste. naprzód... Wszystko, co musisz zrobić, to ustawić pozycję elementów na absolute, a następnie pozycję 50% z top i przetłumaczyć z jego osi z ujemnym -50% 

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

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

Demo

Zauważ, ż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 odpowiednio prefiksów -ms, -moz i -webkit.

Aby uzyskać więcej informacji na temat transform, możesz znaleźć tutaj .

 188
Author: Mr. Alien,
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-05-23 10:14:04

To proste: daj rodzicowi div to: 

display: table;

I daj dziecku div(y) to: 

display: table-cell;
vertical-align: middle;
To jest 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>
 96
Author: Burak Çanga,
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-10-14 14:06:52

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

Wystarczy dodać do #abc następujący css: 

display:flex;
align-items:center;

Simple Demo

Original question demo updated

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>
 84
Author: Jaqen H'ghar,
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-06-19 19:21:56

Znalazłem takie rozwiązanie przez Sebastiana Ekström. 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 .

 48
Author: Scott,
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-11-19 22:43:35

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

 8
Author: Andris,
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-01-13 09:00:33

A może dodasz 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;
}

Fiddle, line-height

Lub padding na #abc. to jest wynik z padding

Update

Dodaj swój css: 

#abc img{
   vertical-align: middle;
}

Wynik . Mam nadzieję, że tego szukasz.

 4
Author: Aldi Unanto,
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
2013-09-06 03:25:41 

 div {
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;
}

.text-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
<div class="text-align-center"> Align center</div>
 3
Author: Fouzia Khan,
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
2019-06-21 12:14:59

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;
}
 2
Author: Friend,
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-03-16 08:44:34

Ten kod jest dla pionowego środkowego i poziomego Center Align bez określenia 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%);
}
 2
Author: nilesh pawar,
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
2019-10-31 09:55:19

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

<style>
.centertext{

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

}
</style>

A następnie zastosuj go do swojego div 

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

Dostosuj procent tłumaczenia do swoich potrzeb. Mam nadzieję, że to pomoże

 1
Author: Hondaman900,
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
2019-02-17 19:18:50 

.container { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h2>Centering Div inside Div, horizontally and vertically without table</h2>
<p>1. Positioning and the transform property to vertically and horizontally center</p>
<p>2. CSS Layout - Horizontal & Vertical Align</p>

<div class="container">
  <div class="center">
    <p>I am vertically and horizontally centered.</p>
  </div>
</div>
 0
Author: Mayank Rajput,
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
2020-12-22 21:24:33