Выравнивание по центру как по вертикали, так и по горизонтали

Я хочу показать изображение в центре страницы с исходным размером.

Я попробовал код ниже

.container 
    {
    
      margin-left: auto;
      margin-right: auto;
        vertical-align: middle;
    	}

<html>
    <head>
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    </head>
    <body>
    
    
    <div class = "container"><img src = "1.png" alt = "No Internet Connection" ></div>
    
    </body>
    </html>

Возможный дубликат Как выровнять элементы по вертикали в div?

— 28.05.2019 09:02

html vertical-alignment

28.05.2019 09:01

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

115

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

.container 
    {
      display: flex;
    align-items: center;
    justify-content: center;
       height: 90vh;
    	}

<html>
    <head>
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    </head>
    <body>
    
    
    <div class = "container"><img src = "1.png" alt = "No Internet Connection" ></div>
    
    </body>
    </html>

Вы можете использовать display: flex;. Он отзывчивый и отлично работает. После этого я использовал justify-content: center; из-за этого он горизонтальный в центре. И из-за align-items: center; и height: 90vh; он вертикально центрирован.

это вертикально не центрировано должным образом

— 28.05.2019 09:23

@Sabuj, что ты имеешь в виду? Если вы говорите о высоте, вы можете изменить ее

— 28.05.2019 09:23

На самом деле я делаю html-страницу для функции android webview.loadurl(). Когда html-страница загружается с изображением, изображение находится немного ниже центра экрана Android.

— 28.05.2019 09:26

@Sabuj, вы можете изменить высоту самостоятельно, я бы порекомендовал вам использовать vh, но вы также можете использовать px

— 28.05.2019 09:28

@Sabuj проверьте единицы css, есть все единицы и посмотрите, что вам подходит

— 28.05.2019 09:31

28.05.2019 09:16