垂直和水平居中对齐

Question

我想在页面中央显示原始尺寸的图像。

我尝试了下面的代码

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

Answer 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; 它是垂直居中的

垂直和水平居中对齐

Center alignment for both vertical and horizontal

html

vertical-alignment