Как установить модальное окно строго по центру для любых разрешений экрана?
10.08.2019 08:06:55 am
Доброго времени. В html и css я новичок, по этому сильно не ругайтесь за глупый вопрос, как установить модальное окно строго по центру? Я фиксирую окошко
Спасибо.
position: fixed и выставляю строго по центру top: 50% и left: 50%, однако, окно сдвигается больше в правую сторону, нежели стоит по центру. Можно поиграть с top: 50% и left: 50%, уменьшить процент, тем самым установить окно по центру, но при просмотре страницы на другом разрешении монитора, модальное окно будет не в центре. Что тут можно сделать?
<div id="modal">
<div>
<h3>Добро пожаловать!</h3>
<p>Текст приветствия.</p>
</div>
</div>#modal {
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 300px;
background: #f0fff0;
}Спасибо.
- Жалоба
10.08.2019 09:05:52 am
Маркус, ширина вашего окошка составляет
500px и высота 300px, значит блок модального окна убегает в право на 250px и в низ на 150px. Чтобы этого не происходило надо "притянуть" блок к левому краю и верху ровно на эти пиксели. Можно при помощи margin-left и margin-top, так:#modal {
position: fixed;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -150px;
width: 500px;
height: 300px;
background: #f0fff0;
}