时间戳

首页 > 解决方案 > 垂直和水平居中对齐

html - 垂直和水平居中对齐

问题描述

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

我尝试了下面的代码

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

标签： htmlvertical-alignment

解决方案

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

推荐阅读