CSS: вертикальное центрирование в позиции: абсолютное деление

Question

У меня есть этот код:

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

Родитель должен иметь ширину и высоту 200px, а потомок - ширину и высоту 100px. Родитель также установлен на position:absolute. Возможно ли горизонтальное и вертикальное центрирование child относительно parent и как?

Результат: если вы установите черный фон для родителя и белый для ребенка, все это должно выглядеть так, как если бы это был белый квадрат с большой черной рамкой.

Статические поля и отступы исключены, поскольку размер дочернего элемента будет изменяться динамически.

---

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

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

Answer 1

Я использовал jQuery UI position API для позиционирования дочернего элемента div в центре, а затем на .animate на основе border-width, вам следует соответственно изменить top и left .

Попробуйте DEMO, чтобы понять код ниже DEMO

После анимации:

HTML:

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

<button>Animate</button>

JS:

$(document).ready (function () {
    positionChild();
});


function positionChild() {
    $( ".child" ).position({
                of: $( ".parent" ),
                my: "center center",
                at: "center center"
    });
}

$('button').click (function () {
    $('.child').animate({'border-width': 47, top: '-=46', left: '-=46'}, 1000);
});

CSS:

.parent { 
    position: absolute;  
    width: 200px; 
    height: 200px; 
    background-color: black; 
    top: 100px; 
    left: 100px; 
}

.child { 
    width: 100px; 
    height: 100px; 
    background-color: #c2c2c2; 
    border: 1px solid blue;
}

Answer 2

Поскольку вы отредактировали ваше сообщение, добавив в него jQuery:

   var c = $('.child'),
       cw = c.width(),
       ch = c.height(),
       hh = ch/2;

c.css({'position' : 'relative' , 'top' : '50%' , 'margin' : '0 auto' , 'margin-top' : '-' + hh + 'px' });

jsfiddle здесь

Отрегулируйте высоту и ширину каждого div и повторите его, чтобы увидеть егов действии.

Answer 3

установить line-height:200px для родителя и display:inline-block для ребенка. вам нужно установить line-height: 20px или что-то еще и vertical-align:middle для ребенка.

jsFiddle DEMO

посмотрите на этот код:

.parent{
    position:absolute; 
    height:200px; 
    width:200px; 
    background:red;
    line-height:200px;
    text-align:center;
}
.child{
    background:blue; 
    width:100px; 
    height:100px; 
    display:inline-block;
    vertical-align:middle;
    line-height:20px;  /* or something else  */
}