Выровнять Div в середине страницы?

-2

Я пытаюсь выровнять свой элемент <div> в центре страницы.Выровнять Div в середине страницы?

Я использую следующий код, который работает, если высота <div class='box'> составляет менее 600 пикселей, если высота увеличивается до 1000 пикселей, она растягивается вверх и вниз по странице.

Код:

<html> 
    <head> 
    </head> 
    <body> 
     <div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div> 
    </body> 
</html> 


<style> 
    .box{ 
     height:600px; 
     width:960px; 
     margin:auto; 
     border:1px solid #000; 
     position:absolute; 
     top:0; 
     bottom:0; 
     right:0; 
     left:0; 
    } 
    .div1{ 
     height:100px; 
     width:100%; 
     background:red; 
     position:relative; 
     top:0; 

    } 
    .div2{ 
     height:100px; 
     width:100%; 
     background:red; 
     position:relative; 
     margin-top:60px; 

    } 
    .div3{ 
     height:100px; 
     width:100%; 
     background:red; 
     position:absolute; 
     bottom:0; 

    } 
    </style>

Я поставил вместе следующий JSFiddle, но, кажется, не отражают то, что мой браузер показывает. Мой браузер отображает на DIV в окне просмотра 600px, как показано ниже:

_ _ _ _ _ _ _ _ _ _ _ _ 
|      | 
|      | 
|   _   | 
|  { Box }  | 
|   -   | 
|      | < Browser window 
- - - - - - - - - - - -

Если высота `увеличивается до 1000px следующие результаты:

_ _ _ _ _ _ _ _ _ _ _ _ 
|   -   | 
|      | 
|      | 
|  { Box }  | 
|      | 
|   _   | < Browser window 
- - - - - - - - - - - -

Что нужно изменить?

источник

2015-02-25 James Gayle

Есть ли способ, вы можете продемонстрировать эту проблему? Трудно сказать, что вы просите, не имея возможности воспроизвести проблему. – showdev

вы должны использовать относительное положение с маркой bla bla, а не сверху, снизу и т. Д. , используя абсолютное значение, нарисует ящик как широкий и высокий, как размер, который вы управляете –

Если кто-то занижает, они должны оставить комментарий о том, почему. Я думаю, что downvotes великолепны, когда мы все можем учиться. Но чтобы проголосовать, не говоря о том, почему не является конструктивным. – w3bMak3r

Для того, чтобы сохранить .div2 в середине контейнера, даже если высота меняется, чтобы добавить этот CSS:

.div2{ 
     height: 100px; 
     width: 100%; 
     background: lightblue; 
     position: absolute; 
     top: 50%; 
     margin-top: -50px; 
    }

Heres your updated Fiddle. Надеюсь, это поможет.

источник

2015-02-25 18:20:50 crazymatt

Для этого установите ваш контейнер относительно.

Тогда ваше положение коробки будет абсолютным.

Сделайте верх: 50%; Добавить margin-top: (-) (высота коробки * .5)

Разместите влево: 50%; Добавить Левое поле : (-) (ширина коробки * 0,5)

Вот код:

.box{ 
 
     height:100vh; 
 
     width:100vw; 
 
     margin:auto; 
 
     border:1px solid #000; 
 
     position:relative; 
 
     top:0; 
 
     bottom:0; 
 
     right:0; 
 
     left:0; 
 
    } 
 
    .centered-object{ 
 
     height:50px; 
 
     width:50px; 
 
     top:50%; 
 
     margin-top: -25px; 
 
     position: absolute; 
 
     left: 50%; 
 
     margin-left: -25px; 
 
     background:red; 
 
     
 
     
 
    }

<div class="box"> 
 
    
 
<div class="centered-object"></div> 
 

 
</div>

Позвольте мне знать, если это имеет смысл для вас, или если вам нужно больше объяснять.

Вот ваша обновленная скрипка, если вы предпочитаете: http://jsfiddle.net/pjj8ujqb/3/

Независимо от того, насколько велики вы сделаете окно поля всегда остается центр.

источник

2015-02-25 18:23:56 w3bMak3r

Вы понимаете вопрос OP? Потому что я этого не делаю. – showdev

Я думал, что он говорит, что хочет квадрат в центре страницы. Но я был смущен, когда увидел, как его скрипка заставит его скрипку иметь 3 бара, и ни одна из них не сосредоточена. Его первое предложение - «у меня есть некоторые проблемы, в результате чего мой div правильно выравнивается в середине страницы». Поэтому я решил, что если я просто покажу ему, как сосредоточиться, он может пойти оттуда и приведет к другим вопросам, чтобы помочь ему дальше. – w3bMak3r

Я тоже смущен. Кажется, что у него уже есть работа центра: «Я использую следующий код, который работает ...». – showdev

Я нашел ответ на свой вопрос. проблема я имел была коробка ДИВ двигалось страницы, когда высота увеличивается, это легко исправить, добавив верхний и нижний край, как так:

.box{ 
     height:800px; 
     width:960px; 
     border:1px solid #000; 
     position:absolute; 
     margin : 5% auto 5% auto; 
     top:0; 
     bottom:0; 
     left:0; 
     right:0; 
    }

источник

2015-02-25 18:43:50

Выровнять Div в середине страницы?

ответ

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