Div внутри anothe div не выравнивается по вертикали

Я пытаюсь центрировать div в контейнере, у которого есть% высоты и ширины. Я могу заставить div располагаться горизонтально, но не вертикально.Div внутри anothe div не выравнивается по вертикали

Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно?

HTML:

<div id='container' > 
    <div id="login"> 
    </div> 
</div>

CSS:

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

#container{ 
    height: 99%; 
    width: 99%; 
    margin: auto; 
} 

#login{ 
    width: 30%; 
    height: 30%; 
    border: groove 1px grey; 
    margin: auto; 
}

JsFiddle является: http://jsfiddle.net/g83RY/

источник

2013-11-16 Destro

вы не можете выровнять Див центр по вертикали с помощью CSS, вы должны назначить поля или отступы dynamcally с помощью JavaScript. –

Это то, что вы ищете? : Http://jsfiddle.net/g83RY/3/ –

Reffer это: [Как установить DIV точно в центре экрана, размер которого динамически изменяется] [1] [1] : http://stackoverflow.com/questions/16052044/how-to-set-div-exactly-in-the-center-of-screen-whose-size-is-changing-dynamicall –

Просто дайте position:relative; top: 35%; в #login.

, который составляет половину оставшейся высоты в контейнере i.e 100 - 30 = 70 =>70/2 = 35%.

Как эта работа:

// 35% space on top 
    // 30% space occupied by login 
    // 35% space on bottom (occupied automatically) 

    //which is equal to 100

Working Fiddle

источник

2013-11-16 17:51:08

Я удалил предложение 'margin-top', потому что margin-top и margin-bottom относятся к ** width ** вместо высоты (да) при работе с процентами , –

вертикально выровнять DIV, вы должны относиться к DIV в качестве встроенного элемента и установить линию - высота div для высоты контейнера div. Таким образом, вы можете позвонить

line-height:y px; 
vertical-align:middle;

источник

2013-11-16 17:45:56 Nate

Поскольку вы не имеете фиксированную высоту, следующие должны сделать это для вас:

#login{  
    top:49%; 
    position:relative; 
}

Fiddle: http://jsfiddle.net/g83RY/3/

источник

2013-11-16 17:48:51

, который не находится в середине .. ваши вычисления ошибочны. верхняя часть должна быть '35%' проверить мой ответ :) –

Div внутри anothe div не выравнивается по вертикали

ответ

Смежные вопросы