Вертикальное выравнивание средний DIV внутри сНу

Question

экзаменационной этот HTML:

<div class="wrapper"> 
    <div class="content"> 
    </div> 
</div> 
<div class="footer"> 
    <hr /> 
    <p>some text</p> 
</div> 

и CSS:

.footer { 
    position: absolute; 
    height: 100px; 
    width: 100%; 
    bottom: 0; 
    background-color: black; 
} 

.wrapper { 
    padding-bottom: 100px; 
    background-color: blue; 
    height: 100%; 
} 

.content { 
    width: 200px; 
    height: 100px; 
    margin: auto; 
    background-color: green; 
} 

html, body { 
    width: 100%; 
    height: 100%; 
} 

Вы можете видеть, что footer есть позиция абсолютной и остаться в нижней части страницы. wrapper будет покрывать оставшееся пространство и содержать внутри него content. Я хочу вертикально выравнивать content, не нарушая текущий макет. Есть ли у вас предложения?

Here - ссылка JSFiddle. (Примечание: jsfiddle не работает должным образом, всегда есть место под footer, это поведение не возникает при запуске HTML-файла в браузере).

Примечание: Я не хочу использовать фиксированную высоту для wrapper, я хочу, она охватывает все остальное пространство, поэтому, пожалуйста, не предложить мне использовать line-height

Я попробовал пример here, но это Безразлично» т, кажется, работают

ПРИМЕЧАНИЕ Я хочу, чтобы макет легко изменить (например, добавить заголовок или содержание в верхней части), не нарушая его поэтому я хочу, чтобы избежать использования абсолютного положения на wrapper и content

Примечание 2 Извините за не уточнить, на самом деле, content не имеет фиксированного размера, его размер зависит от содержания внутри него, так что решение с использованием negative margin не работает, как уже упоминалось выше, я

Answer 1

Вот один подход, используя следующий CSS:

.footer { 
    position: absolute; 
    height: 100px; 
    width: 100%; 
    bottom: 0; 
    background-color: black; 
} 

.wrapper { 
    background-color: blue; 
    position: absolute; 
    top: 0; 
    bottom: 100px; 
    left: 0; 
    right: 0; 
} 

.content { 
    width: 200px; 
    height: 100px; 
    background-color: green; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
} 

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 

Используйте абсолютное позиционирование, а затем отрицательные поля, так как ваш контент хорошо определены размеров, это относительно просто.

См демы по адресу:

Для .wrapper, используйте верхний, нижний, левые и правые коррекции растянуть DIV на всю ширину и высоту , принимая во внимание 100px для колонтитула.

Для .content, установите верхний и левый на 50%, центральная точка .wrapper, а затем настроить для центра .content DIV с использованием отрицательных полей.

Запомните нулевое значение поля для body, иначе вы можете увидеть пробел 10px в зависимости от вашего браузера.

Answer 2

Я был в состоянии заставить его работать, используя Method 1 from the example you linked

Я добавил следующее:

.content { 
    width: 200px; 
    height: 100px; 
    margin: auto; 
    background-color: green; 
    /* THE BELOW WAS ADDED */ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -100px 0 0 -100px; 
} 

html, body { 
    width: 100%; 
    height: 100%; 
    /* BELOW ADDED TO REMOVE EXTRA SPACE AROUND EDGES */ 
    margin: 0; 
} 

jsFiddle of working example

Answer 3

Добавьте это к вашим .content

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

Just 3 линии кода до vertical align