CODEWITHSUNDEEP
htmlvertical-alignment
Sabuj
Sabuj

Reputation: 5

Center alignment for both vertical and horizontal

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>

Upvotes: 0

Views: 210

Answers (1)

xmaster
xmaster

Reputation: 1050

.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

Upvotes: 1

Related Questions