Center alignment for both vertical and horizontal

Question

I want to show an image in the center of a page with original size.

I tried the code below

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

Possible duplicate of [How to Vertical align elements in a div?](https://stackoverflow.com/questions/79461/how-to-vertical-align-elements-in-a-div) — Adriano, May 28 '19 at 07:02

score 1 · Accepted Answer · answered May 28 '19 at 07:16

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>

You can use display: flex;. It's responsive and works great. After that I used justify-content: center; because of this it is horizontal in the center. And because of align-items: center; and height: 90vh; it is vertical centered

answered May 28 '19 at 07:16

xmaster

1,042
7
20

it is vertically not centered properly – Sabuj May 28 '19 at 07:23
@Sabuj what do you mean? If you are talking about the height you can change it – xmaster May 28 '19 at 07:23
Actually i am making a html page for android webview.loadurl() function. When the html page load with image the image is slightly below the center of android screen. – Sabuj May 28 '19 at 07:26
@Sabuj you can change the height yourself, I would recommend you to use `vh` but you can also use `px` – xmaster May 28 '19 at 07:28
@Sabuj check css units there are all units and look what is fine for you – xmaster May 28 '19 at 07:31

Center alignment for both vertical and horizontal

1 Answers1