Как расположить div в центре экрана?

Question

На самом деле в центре текущего вида, над всеми остальными объектами. Кросс-браузер и без сторонних плагинов и т. Д.

С помощью CSS или Javascript

UPDATE:

Я пытался использовать Javascript Sys.UI.DomElement.setLocation (), но этот позиционирующий объект не в абсолютном местоположении, а относительно его родителя.
Есть ли функция для размещения в абсолютном месте?

Answer 1

Чтобы он был в центре браузера, независимо от прокрутки страницы (что, вероятно, и нужно), позиция фиксированная будет более надежной. Внесение изменений в код mike108:

<style type="text/css"> 
.centered {  
  position:fixed;
  z-index: 100;  
  top:50%;  
  left:50%;  
  margin:-100px 0 0 -100px;  
  width:200px;  
  height:200px;  
}  
</style>

Предполагается, что у вас есть поле фиксированного размера, которое вы показываете. Если у вас нет поля фиксированного размера, вам нужно использовать Javascript для измерения окна и элемента div и расположить его явно (опять же, возможно, фиксированный путь).

Проведите тестирование во всех ваших браузерах. Там может быть что-то, о чем мы не думаем.

Я бы порекомендовал вам взглянуть на один из плагинов Javascript, который делает это, по крайней мере, для начала. Они поняли это, даже если вы не хотите использовать их код. Я думаю, что я использовал jqModal в качестве отправной точки.

Answer 2

<style type="text/css"> 
.Div1 {  
position:absolute;  
top:50%;  
left:50%;  
margin:-100px 0 0 -100px;  
width:200px;  
height:200px;  
border:1px solid #9999FF;  
}  
</style> 


<div class="Div1">
</div>

Answer 3

Ему должна быть назначена ширина (то есть ширина: 500px;), а затем поле: auto; должен сделать это.

Answer 4

Я использую этот блок кода js;

// вызов функции как для центра высоты, так и для ширины

    setToCenterOfParent( $('#myDiv'), document.body, false, false);

// вызов функции только для обоих высотных центров

    setToCenterOfParent( $('#myDiv'), document.body, false, true);

// вызов функции только для ширины по центру

    setToCenterOfParent( $('#myDiv'), document.body, true, false);

// определение функции

    function setToCenterOfParent(element, parent, ignoreWidth, ignoreHeight){
        parentWidth = $(parent).width();
        parentHeight = $(parent).height();  
        elementWidth = $(element).width();
        elementHeight = $(element).height();
        if(!ignoreWidth)
            $(element).css('left', parentWidth/2 - elementWidth/2);
        if(!ignoreHeight)
            $(element).css('top', parentHeight/2 - elementHeight/2);
    }

Answer 5

Пожалуйста, проверьте это решение. Нет необходимости определять ширину или высоту блока div. Это будет всегда в середине / центре экрана. Я надеюсь, что мое решение будет полезным для всех.

<style type="text/css"> 

  .mask{
    position:fixed;
    z-index:100;
    width:100%;
    height:100%;
    text-align: center;
    color: white;
    background-color: rgba(0,0,0,0.75);
    overflow:hidden;
  }

  .contener{
    height:100%;
    display:inline-table;
  }

  .contener .content{
    vertical-align: middle;
    display:table-cell;
  }

  .contener .content p{
    padding:2em;    
    border:1px solid #3d3d3d;
    background-color: #1d1d1d;
    border-radius: 10px;
    -moz-box-shadow: 0px 10px 10px black;
    -webkit-box-shadow: 0px 10px 10px black;
    box-shadow: 0px 10px 10px black;
  }

</style> 

<div class="mask">  
   <div class="contener">
     <div class="content">
       <p>Test string</p>
     </div>
   </div>
</div>

Answer 6

Этого легко достичь с помощью flex. Microsoft больше не поддерживает старые версии Windows. Кроме того, Mozilla и Chrome постоянно обновляют свои движки, поэтому flexbox прочно укоренился во всех современных браузерах.

#container{
   display: flex;
   justify-content: center;
   align-items: center;
}

Все, что установлено как непосредственный дочерний элемент этого элемента #container, будет отцентрировано.

Этот короткий фрагмент кода идеально подходит для таких вещей, как меню входа или центрирование текста на фоновом изображении.

РЕДАКТИРОВАТЬ - КОД НИЖЕ УСТАРЕЛ, СМОТРЕТЬ ОБНОВЛЕННЫЙ КОД ВЫШЕ

Если вы хотите что-то по центру и по вертикали, попробуйте это ...

 #shell{
width:100%;
height:100%
position:absolute;
z-index:100;
background: rgba(255,255,255,.8);
display:table;
}

#inner{
 margin:0 auto;
 display:table-cell;
 vertically-align:middle;
 width: /* input width here */
}


#overlay_container{
   width: /* input width here again */
   height: /* input height here */
   additional-styles: /* self explanatory */
}