Как вертикально выровнять по центру содержимого div с определенной шириной / высотой?

Каким будет правильный метод вертикального центрирования любого содержимого с определенной шириной / высотой div.

В примере есть два содержимого с разной высотой, как лучше всего центрировать по вертикали оба с помощью класса .content. (и это работает для любого браузера и без решения table-cell)

У вас есть некоторые решения, но хотелось бы узнать другие идеи, один из которых использует position:absolute; top:0; bottom: 0;и margin auto.

Я немного исследовал это и из того, что я обнаружил, у вас есть четыре варианта:

Версия 1: Родительский div с отображением в виде ячейки таблицы

Если вы не против использования display:table-cellродительского div, вы можете использовать следующие параметры:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

Живая ДЕМО

Версия 2: Родительский div с блоком отображения и ячейкой таблицы отображения содержимого

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

Живая ДЕМО

Версия 3: родительский div с плавающей точкой и контентный div в виде ячейки таблицы отображения

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

Живая ДЕМО

Версия 4: относительная позиция родительского div и абсолютная позиция содержимого

Единственная проблема, с которой я столкнулся с этой версией, заключается в том, что, похоже, вам придется создавать CSS для каждой конкретной реализации. Причина этого в том, что div содержимого должен иметь заданную высоту, которую будет заполнять ваш текст, и верхний край поля будет рассчитан из этого. Эту проблему можно увидеть в демонстрации. Вы можете заставить его работать для каждого сценария вручную, изменив% высоты вашего div содержимого и умножив его на -5, чтобы получить значение верхнего предела маржи.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

Живая ДЕМО

Это также можно сделать, используя display: flexвсего несколько строк кода. Вот пример:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

Живая демонстрация

Я нашел это решение в этой статье

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

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

Это работает как шарм, если высота элемента не фиксирована.

Простой трюк для вертикального центрирования содержимого div - это установить высоту строки, равную высоте:

<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}

но это работает только для одной строки текста!

Лучший подход - с div в качестве контейнера и диапазона со значением в нем:

.cont {
  width: 100px;
  height: 30px;
  display: table;
}

.val {
  display: table-cell;
  vertical-align: middle;
}

    <div class="cont">
      <span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
    </div>

маржа: all_four_margin

предоставив 50% all_four_margin, поместит элемент в центр

style="margin: 50%"

вы также можете применить это для следующих

маржа: верхний правый нижний левый

маржа: вверху справа и слева внизу

поля: верхнее и нижнее правое и левое

задавая соответствующий%, мы получаем элемент, где захотим.