YogeshChauhan . com

How to center an image horizontally and vertically?

in CSS on September 26, 2020

We can use flex to center an image horizontally and vertically. But that is just one way to do it. There are multiple ways to do that.

Example 1

HTML


<div class="container">
 <img src="image_path" />
</div>

CSS


html, body, .container {
 height: 100%;
}

.container {
 display: flex;
 justify-content: center; /* horizontal center */
}

img {
 align-self: center; /* vertical center */
}

Example 2

HTML


<img src="image_path" />

CSS


html, body {
 height: 100%;
}

body {
 display: flex;
 justify-content: center; /* horizontal center */
 align-items: center; /* vertical center */
}
amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Some interesting HTML Input Attributes to rememberHTMLHow to detect if browser supports WebP format on server side PHP script?PHPHow to add multiple components in React app?ReactWhat does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?MiscHow to render lists inside a component in React?ReactHow to hide a DIV on clicks outside of it using jQuery?jQueryHow to display and animate image on scroll using JavaScript?JavaScriptSocial Media Colors: LESS VariablesMiscJavaScript Input Validation Theme Park Example using throw StatementJavaScriptWhat’s a Strict mode in JavaScript?JavaScriptHow to use @if and @else in SCSS?SCSSHow to convert an HTML radio buttons into a toggle switch using CSS?CSS