如何将多个图像放在多个背景的中心[重复]

Question

如何在背景上垂直和水平居中图像？

我有这个代码：

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

最后，我得到的图像只在两个背景上水平居中，我怎样才能让它们垂直居中？

Answer 1

这很简单，只需替换：

text-align: center;

与：

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

给它一个填充是盒子大小500px和图像大小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>

Answer 2

使用Flexbox

对于水平中心 -> justify-content:center 在父级

对于垂直中心 -> align-self:center 在孩子身上

.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 支持的浏览器：当您在 Google 上搜索时

Answer 3

有几种方法可以做到这一点，比如使用它 flexbox、display、position 等。centering css complete guide

例如使用位置：（所有旧浏览器都支持，例如 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>