Как центрировать Div внутри Div, для многоплатформенного веб-дизайна

Question

Итак, у меня есть ползунок и ползунок. Оба являются абсолютно позиционируемыми элементами. Макет, который я сейчас отлично смотрю на настольном мониторе (1920x1080). Однако это не так хорошо на меньшем экране ноутбука (слайдер смещен вправо и, следовательно, не выравнивается по центру). Ниже вы найдете CSS как для контейнера ползунка, так и для самого ползунка.

#MasterSlider_container{ 
    height: 570px; 
    position: absolute; 
    width: 100%; 
    background-color: #000; 
    top: 20%; 
} 

#slider1_container{ 
    left: 21%; 
    top: 7%; 
    border-style: solid; 
    border-width: 8px; 
    position: absolute; 
} 

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

Answer 1

#MasterSlider_container{ 
height: 570px; 
position: relative; 
width: 100%; 
background-color: #000; 
top: 20%; 
} 

#slider1_container{ 
margin:0 auto; 
border-style: solid; 
border-width: 8px; 
position: absolute; 
width:50%; 
} 

Изменить ширину в соответствии с вашими потребностями. Только если вы установите ширину, вы увидите, что контейнер центрирован.