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

Answer 2

.container{
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    display: table;
}

垂直和水平居中对齐

2 个答案: