CSS позиционирование изображения центр

Question

у меня есть проблемы с позиционированием изображения

<div class="foto img-thumbnail"> 
    <img class="img-thumbnail tengah" src="member/37/foto_profile/profile37.png"> 
</div> 

В файле CSS

.foto { 
background-image: url('member/37/foto_profile/large.jpeg'); 
height: 300px; 
background-repeat: no-repeat; 
background-size:cover; 
background-position: 
center center; 
width: 100%; 
} 
.tengah { 
position: absolute; 
} 

GREEN = классТенгах

RED = классфото

я хочу изображение (RED) позиционирование центр DIV

, когда я изменить CSS, как

.tengah { 
left: 50%; 
top: 50%; 
position: absolute; 
} 

него возвращение в центр изображения

Кто-нибудь может мне помочь?

благодаря, прежде чем :)

Answer 1

Я думаю, что вы говорите о сосредоточении .tengah DIV в .foto.

Если да, то вам необходимо:

.foto { 
    background-image: url('member/37/foto_profile/large.jpeg'); 
    height: 300px; 
    background-repeat: no-repeat; 
    background-size:cover; 
    background-position: 
    center center; 
    width: 100%; 
    position: relative; /* ADDED */ 
} 

.tengah { 
    left: 50%; 
    top: 50%; 
    position: absolute; 
    margin-top: -30px; /* ADDED */ 
    margin-left: -30px; /* ADDED */ 
} 

Поля составляют половину ширины и высоты <div> вы хотите по центру.

Answer 2

уборщик метод, который будет адаптироваться к различным экранам размера было бы избежать «позицию: абсолютная» в целом, установив авто поля слева и справа для класса .tengah:

.tengah { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    top: 50%; 
} 

Этот класс стиль будет автоматически центр изображения/div. «Верх» можно немного отрегулировать в зависимости от длины изображения, если «вертикальное выравнивание» не используется.