0

How to center images both vertically and horizontally on background?

I have this code:

.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;
}
<div class="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="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>

Finally, I got the images only horizontally centered on both backgrounds, how can I also vertically center them?

Racil Hilan
  • 24,690
  • 13
  • 50
  • 55
chale
  • 9
  • 1

3 Answers3

0

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

enter image description here

Community
  • 1
  • 1
Dhaval Jardosh
  • 7,151
  • 5
  • 27
  • 69
  • Cool, Thank you so much!! – chale Apr 02 '18 at 00:12
  • If the answer was helpful, please mark it as correct. – Dhaval Jardosh Apr 02 '18 at 00:14
  • Using flexbox is a good and modern solution, but you cannot use it if you want to support older browsers. I think that for the simple case in the question, it's an overkill as it can be easily done without flexbox and you don't need to worry about browser support. – Racil Hilan Apr 02 '18 at 00:15
  • If OP is quite precise about older browser, he definitely can't use Flex. But as it's not specified, flexbox is super handy. Your solution is great as well @RacilHilan :) – Dhaval Jardosh Apr 02 '18 at 00:22
  • When you want to check the support for some CSS, JavaScript, or HTML feature, check a better website like [caniuse](https://caniuse.com/#feat=flexbox) or MDN ;). w3school is also not bad, although many developers don't like it because it wasn't accurate in the past, and although it is much better now, they still hold their opinion against it. – Racil Hilan Apr 02 '18 at 00:44
0

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>
Racil Hilan
  • 24,690
  • 13
  • 50
  • 55
0


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>
MR.Mostafa
  • 133
  • 2
  • 8