Как выровнять по центру вертикально положение: относительный элемент?

Как выровнять по центру вертикально родительский контейнер по холсту с position:relative? Родительский контейнер имеет дочерний элемент с position:absolute. Дочерний элемент расположен в центре родительского контейнера.

Вот фрагмент:

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: red;
  margin: auto;
}

.item {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

<div class="container">
  <div class="item"></div>
</div>

Ответ 1

Одним из решений является обернуть ваш .container двумя обертками; дайте первый display: table; и height: 100%; width: 100%;, а второй display: table-cell; и vertical-align: middle;. Также убедитесь, что ваши body и html имеют полную высоту.

Вот небольшая рабочая демонстрация: небольшая ссылка.

Другой метод - применить top: 50%; к вашим .container и margin-top: -150px; (300px / 2 = 150px). (Обратите внимание, что этот метод требует, чтобы вы знали точную высоту своего контейнера, поэтому может быть не таким, каким вы хотите, но это может быть и так!). Небольшая рабочая демонстрация этого последнего метода: еще одна небольшая ссылка.

Я надеюсь, что это помогло!

Ответ 2

Демо

Отдайте item left 50% и top 50% и поля с половиной по ширине или верхняя половина верхней границы

Теперь используется этот css

.container{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: red;
    margin:auto;
}

.item{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-50px;
}

Демо

если вы использовали не позиционировать, чем использовали для этого http://jsfiddle.net/exmRf/16/