Невозможно получить гибкую рамку для вертикального и горизонтального центра

Question

Итак, я настраиваю очень простую целевую страницу для друга. Я не разработал веб-сайт в течение нескольких лет, и я очень не в курсе. Я искал целую вечность, но ничего не помогло. Попытка получить основное изображение PNG по центру в середине страницы.

Я пытался использовать flexbox - justify-content: center; align-items: center; - и не могу заставить его работать. Я пытался вернуться к старым ячейкам таблицы, и это не сработало. Я даже пытался делать маржинальные автоматы с установленной маржинальной вершиной, но этого было недостаточно.

        display: flex;
        justify-content: center;
        align-items: center;


        height: 100vh;

Хотите, чтобы элемент был отцентрирован, но центрировался только горизонтально, а не вертикально. Страница здесь для справки www.shoeshoe.co/

Answer 1

Ваши настройки верны - вам просто нужно поместить это в правильный контекст:

html,
body {
  margin: 0;
}

.wrap {
  box-sizing: border-box;
  height: 100vh;
  border: 1px solid green;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="wrap">
  <img src="https://placehold.it/50x50/fa0">
</div>