HTML. Выравнивание картинки по центру.

Question

HTML. Выравнивание картинки по центру.

Екатерина Л. Профи (792), открыт 2 недели назад

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

Текущий код:

Страница (изображение скраю):

Пробовала вместо text-align прописать в css:

1) margin: 10px auto 20px;
display: block;
2) display: table-cell;
height: 400px;
vertical-align: middle;
3) display: table-cell;
height: 300px;
text-align: center;
width: 300px;
vertical-align: middle;

При любом из вариантов 1-3 позиционирование картинки не меняется. Что-то в коде пропускаю, а что понять не могу. Помогите, пожалуйста, исправить

Дополнен 2 недели назад

Так тоже пробовала:
position: relative;
text-align: center;

Answer 1

Jacob G. Искусственный Интеллект (268943) 2 недели назад

 .border1 { 
  position: fixed; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100vw; 
  height: 100vh; 
}

Екатерина Л.Профи (792) 2 недели назад

Большое спасибо!!!

Екатерина Л., у тебя так все картинки по центру встанут... Если надо только одну - обставь ее кодами.

Answer 2

Использовать flexbox и этот кошмар, унаследованный от старых технологий забудется как страшный сон.. Данное изображение, как вариант, можно поместить на фон блока.

Пример там: https://bulletproof-password.web.app/grid-layout-001.html