Центрирование Модальное или div, если оно установлено

Question

См. Это Fiddle, как я могу центрировать синий div без фиксированной ширины и высоты в родительском и дочернем?

Это сообщения в SO

<div class="parent"> 
<div class="child"> 
</div> 
</div> 

Update

Они позиционируются элементы, я хочу ребенка в центре экрана.

Update 2

Посмотреть центре here, но я не могу использовать фиксированные ширины, ни высоты в родителю ни детей. Мне нужны элементы, потому что мне нужно, чтобы они были над другими элементами.

Answer 1

Чтобы отцентрировать DIV, вы просто должны добавить этот атрибут:

margin-left: auto; 
margin-right: auto; 

или более сжатую версию (предполагается, что 0px для верхнего и нижнего края):

margin: 0px auto; 

Это предполагает, что у вас есть какое-то значение ширины для этого элемента, который вы хотите центрировать, будь то фиксированный или процент. Вам не нужно ничего в родительском, чтобы диктовать поля ребенка.

Answer 2

Попробуйте это в центре ширины.

<div class="parent"> 
<div class="child"> 
</div> 
</div> 
<style type="text/css"> 
.parent{ 
} 
.child{ 
    background: none repeat scroll 0 0 lightblue; 
    height: 50px; 
    margin: 0 auto; 
    width: 150px; 
} 
</style> 

Answer 3

Запас верхом: -50%;/* почему это берет ширину родителя ???? */

Это потому, что ваш родительский DIV имеет position: fixed и ваш ребенок DIV имеет position: absolute и так как абсолютное положение элемента позиционируется относительно первого родительского элемента, который имеет место, кроме статической.

Таким образом, ваш ребенок ДИВ займет маржинальный верхней и левой границы со значением, равным -50% вашей материнской ширина которого -50% * 150 = 75px

Answer 4

Я думаю, что это может решить вашу проблему, но это требует JQuery[.width()].

.parent{ 
    position: fixed;  
    /* I can't use static width nor height, TO DELETE(try changing this)*/ 
    width: 500px; 
    height: 400px; 
    background: red;  
} 

.child{ 
    display: inline-block; 
    position: absolute; 
    /*Simulate width and height, these are actually calculated by content*/ 
    width: 100px; 
    height:50px; 
    background: lightblue; 
} 

JQuery OnLoad: [JSFiddle]

$(function changePostion() { 
    var s = $(".parent").width(); 
    var e = $(".child").width(); 
    var d= (s-e)/2; 
    $(".child").css({"left":d}); 
    var sh = $(".parent").height(); 
    var eh = $(".child").height(); 
    var dh= (sh-eh)/2; 
    $(".child").css({"top":dh});  
}); 

Это article является лучшим учебником для атрибута позиционирования HTML в центре. Возможно, лучший способ обойтись без использования JQuery.

Answer 5

Динамические модальности могут быть самыми большими в мире. Вам нужно JS, чтобы изменить высоты и ширину. Можете ли вы использовать плагин? Если да, вот некоторые хорошие варианты. У бутстрапа Twitter есть модальный, который очень легко настроить, но сложнее загружать divs через ajax и iframes. Вы должны выбрать тот или другой. simplemodal (http://www.ericmmartin.com/projects/simplemodal/) - это хорошо, но вам все равно нужно сделать большую работу самостоятельно. Он работает с iframes и содержимым ajax.