垂直和水平居中对齐答案

【问题标题】：Center alignment for both vertical and horizontal垂直和水平居中对齐
【发布时间】：2019-05-28 15:16:32
【问题描述】：

我想在页面中心显示一个原始大小的图像。

我试过下面的代码

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

【问题讨论】：

How to Vertical align elements in a div?的可能重复

标签： html vertical-alignment

【解决方案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; 它是垂直居中的

【讨论】：

垂直居中不正确
@Sabuj 你是什么意思？如果你在谈论高度，你可以改变它
实际上我正在为 android webview.loadurl() 函数制作一个 html 页面。当 html 页面加载图像时，图像略低于 android 屏幕的中心。
@Sabuj 你可以自己改变高度，我建议你使用vh 但你也可以使用px
@Sabuj 检查 css 单元有所有单元，看看什么适合你