How To Put The Multiple Images On The Center Of Multiple Backgrounds

How to center images both vertically and horizontally on background? I have this code: Finally, I got the images only horizontally centered on both backgrounds, how can I also ver

Solution 1:

This is easy, simply replace:

text-align: center;

with:

box-sizing: border-box;
padding: 150px;

Give it a padding that is half of the difference between the size of the box 500px and the size of the image 200px:

500 - 200 = 300 / 2 = 150.

.lineargradientgreen {
  background-image: linear-gradient(green, white);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  box-sizing: border-box;
  padding: 150px;
}

.lineargradientblue {
  background-image: linear-gradient(to top left, white, blue);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  box-sizing: border-box;
  padding: 150px;
}

<div class="lineargradientgreen">
  <img src="https://placehold.it/200x200" alt="Hot Air Balloon" />
</div>

<div class="lineargradientblue">
  <img src="https://placehold.it/200x200" alt="Hot Air Balloon" />
</div>

Solution 2:

Use Flexbox

For horizontal center -> justify-content:center on parent

For vertical center -> align-self:center on child

.lineargradientgreen {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(green, white);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  text-align: center;
}

.lineargradientblue {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to top left, white, blue);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  text-align: center;
}

div img {
  width: 300px;
  align-self: center;
}

<div class="lineargradientgreen">
  <img src="https://www.samcodes.co.uk/project/geometrize-haxe-web/assets/images/xseagull.jpg.pagespeed.ic.iK66EGA15-.jpg" alt="Hot Air Balloon" />
</div>

<div class="lineargradientblue">
  <img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" alt="Hot Air Balloon" />
</div>

Flexbox Supported Browsers: When you search on Google

Solution 3:

There are several ways to do this, like using it flexbox, display, position and etc. centering css complete guide

For example using position: (All older browsers support, like IE :D)

.lineargradientgreen {
  background-image: linear-gradient(green, white);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  text-align: center;
}

.lineargradientblue {
  background-image: linear-gradient(to top left, white, blue);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  text-align: center;
}

.myclass{
	position: relative;
}
.myclass > img{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

<div class="myclass lineargradientgreen">
  <img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" alt="Hot Air Balloon" width="200px" height="200px" />
</div>

<div class="myclass lineargradientblue">
  <img src="https://www.samcodes.co.uk/project/geometrize-haxe-web/assets/images/xseagull.jpg.pagespeed.ic.iK66EGA15-.jpg" alt="Hot Air Balloon" width="200px" height="200px" />
</div>