1

Подскажите, в чём может быть проблема - есть такой код:

<div class='screen'><div class='block'></div></div>

Хочу, чтобы .block был выравнен по горизонтали внутри .screen.

Задаю следующие стили:

.screen {
  z-index: 1000;
  position: fixed;
  left: 0px;
  top: 50px;
  width: 100vw;
  height: calc(100vh - (50px + 30px));
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
}

.block {
  position: absolute;
  width: calc(100vh - (50px + 30px + 2 * 10px));
  max-width: calc(100vw - 2 * 10px);
  height: calc(100vh - (50px + 30px + 2 * 10px));
  max-height: calc(100vh - (50px + 30px + 2 * 10px));
  /*left: calc(50% - (100vh - (50px + 30px + 2 * 10px)) / 2);*/
  top: 10px;
}

ожидаю, что .block будет отцентрирован из-за родительского text-align: center;, но этого не происходит :(

как быть?

Задать горизонтальные координаты я не могу (как в закомментированном коде), потому что ширина может меняться.

1 ответ 1

2

Добавить css:

.block {
    left: 50%;
    transform: translateX(-50%);
}

И поправить html:

<div class='screen'><div class='block'></div></div>

есть классная статья про transform: http://css.yoksel.ru/pages/transform-functions/

Когда что-то забываю, то смотрю сюда. Рад что помогло )))

6
  • сработало! Но что это за магия?! Не могу понять как это срабатывает.
    – Zhihar
    19 мая 2018 в 13:43
  • Правильно ли я понял, что left: 50%;, где 50% - это родительские проценты, а при translateX(-50%); - 50% - это свои, родные, а не родительские?
    – Zhihar
    19 мая 2018 в 13:49
  • Да все верно. left сдвигает на 50% в право , а нам нужен центр, поэтому мы сдвигаем дочерний элемент влево на 50%, чтобы он стал в середине. Рад что помогло) 19 мая 2018 в 13:52
  • а если запросить у элемента координаты - они же будут корректными? Т.е. не придётся компенсировать эти 50%
    – Zhihar
    19 мая 2018 в 13:54
  • Так же классно transform для выравнивания по вертикали использовать)) top: 50%; transform: translateY(-50%); или выравнивания вообще по центру. left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); 19 мая 2018 в 13:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.