Центрирование по вертикали и горизонтали - PullRequest
Новая
       19

Центрирование по вертикали и горизонтали

0 голосов
/ 28 мая 2019

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

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

.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>

Ответы [ 2 ]

1 голос
/ 28 мая 2019 

.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; это вертикально по центру

0 голосов
/ 28 мая 2019 
.container{
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    display: table;
}
...