Центрирование DIV в другой DIV с изображением

Question

У меня есть эта структура: HTML:

<div class="wrapper"> 
    <img src="image.jpg" /> 
    <div class="circle"> 
    X 
    </div> 
</div> 

CSS:

.circle { 
    width:50px; 
    height:50px; 
    border-radius:50%; 
    background: #FF0000; 
} 

Я хочу, чтобы поместить DIV с классом окружности точно в центре DIV «обертка», на данном изображении. Можно ли сделать это только в css? если нет, решение может использовать jQuery.

У меня есть много div в разных размерах.

Answer 1

Просто установите положение div и поместите его в центр. Пока значения жестко запрограммированы, просто вставьте его в центр. Обязательно добавьте position: relative к обертке, чтобы круг был абсолютно помещен внутри обертки, а не div над ним в дереве.

CSS:

.wrapper { 
    /* other vals */ 
    position: relative; 
} 

.circle { 
    /* other vals */ 
    position: absolute; 
    left: /* (width of wrapper - width of circle)/2 */ 
    top: /* (height of wrapper - height of circle)/2 */ 
} 

Answer 2

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

Soluton 1:

.wrapper { 
    position: relative; 
} 


.circle { 
    position: absolute; 
    trnasform: translate(50%, 50%); 
} 

Soluton 2:

.wrapper .circle { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

Решение 3:

Это уже есть - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Это поможет вам расположить свой div вертикально и горизонтально посередине.