Как выровнять текст по вертикали в div?

Question

Я пытаюсь найти наиболее эффективный способ выравнивания текста с помощью div. Я попробовал несколько вещей, но ни одна из них не работает.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 1

Попробуйте, добавьте родительский div:

display:flex;
align-items:center;

Answer 2

Проверьте это простое решение:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float:left;
    display:block;
    width:100%;
    height:88px
}

.block-title h3 {
   display:table-cell;
   vertical-align:middle;
   height:inherit
}

JSFiddle

Answer 3

Это самое чистое решение, которое я нашел (IE9 +), и добавляет исправление для проблемы "off by .5 pixel", используя transform-style, который другие ответы не указали.

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

Источник: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 4

Существует более простой способ выравнивания содержимого по вертикали без обращения к таблице / ячейке таблицы:

http://jsfiddle.net/bBW5w/1/

В него я добавил невидимый (width = 0) div, который принимает всю высоту контейнера.

Кажется, что работает в IE и FF (последние версии), не проверял с другими браузерами

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

И, конечно же, CSS:

.t, .t > div:first-child
{ 
    border:1px solid green;
}
.t
{
    height:400px;
}
.t > div 
{ 
    display:inline-block; 
    vertical-align:middle  
}
.t > div:last-child
{
    height:100%;    
}

Answer 5

Простое решение для элемента незнающих значений

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Answer 6

Маржа авто на сетке.
Аналогично flexbox, применение margin-auto к элементу сетки выравнивает его по обеим осям.

.container{
  display: grid;
}
.element{
  margin: auto;
}

Answer 7

  h1{
  margin:0;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

    <div class="container">
            <h1>vertical align text</h1>
    </div>

С помощью этого трюка вы можете выровнять что угодно, если вы не хотите, чтобы это было по центру, добавьте «left: 0» для выравнивания по левому краю.

Answer 8

В соответствии с ответом Адама Томата был подготовлен jsfiddle пример для выравнивания текста в div

<div class="cells-block">    
    text<br/>in the block   
</div>

при использовании отображение: flex в CSS

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* vertically   */
    justify-content: flex-end; /* horisontally */
    text-align: right;         /* addition: for text's lines */
}

с другим примером и несколькими пояснениями в блоге .

Answer 9

При использовании flex будьте осторожны с различиями в рендеринге браузеров.

Это хорошо работает как для Chrome, так и для IE:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Сравните с тем, который работает только с Chrome:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style="    margin: auto;">Active Tasks</span></div>
</div>

Answer 10

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative{
    position:relative;
 }
 .absolute{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5);
 }
 .table{
    display:table;
    height:100%;
    width:100%;
    text-align:center;
    color:#fff;
 }
 .table-cell{
    display:table-cell;
    vertical-align:middle;
 }