Как выровнять поле в середине страницы без использования поля?

Question

Я пытаюсь получить коробку в середине страницы без использования поля.

I tried-

.box-middle 
{ 
vertical-align:middle; 
height:100px; 
width:100px; 
border:1px solid #ddd; 

} 

Это не работает на общероссийского

Но вещи с настройкой полей свойств работы и я не хочу использовать margin. Потому что это дает разрыву отклика на веб-дизайн.

У меня есть форма для входа в систему и вы хотите установить его в середине страницы.

Пожалуйста, руководство!

Здесь вы можете делать трюки с этим box-

Please align me middle

Answer 1

Попробуйте это:

.box-middle 
{ 
margin-top:-50px;/*half the box's height*/ 
    margin-left:-50px;/*half the box's width*/ 
height:100px; 
width:100px; 
border:1px solid #ddd; 
    background:#98bf26; 
position: absolute; 
top: 50%; left: 50%; 

} 

http://jsfiddle.net/LTec3/1/

Answer 2

Вы можете вручную центр что-то с абсолютным позиционированием

В этом сделаю проклейки 20/60/20 и будет регулировать в зависимости от стороны окна пользователя:

<DIV style="position:absolute; top:249px; left:20%; width:60%; height:700px;"> 

или

<DIV style="position:absolute; top:249px; left:435px; width:233px; height:700px;"> 

Существует также простой центр тег:

<center> 

Answer 3

I обновили вашу скрипку fiddle

.box-middle 
{ 
text-align:center; 
margin: 50px auto; 
height:100px; 
width:100px; 
border:1px solid #ddd; 
background:#98bf26; 

} 

<div style="border:1px solid"> 
<div class="box-middle"></div> 
</div> 

Answer 4

Используйте следующий JQuery код:

$(window).resize(function(){ 

    $('.className').css({ 
    position:'absolute', 
    left: ($(window).width() - $('.className').outerWidth())/2, 
    top: ($(window).height() - $('.className').outerHeight())/2 
    }); 

    }); 

// Для первоначального запуска функции:

$(window).resize();