Question

如何垂直对齐已经与display：block水平对齐的图像; margin-left：auto; margin-right：auto;

注意我不能使用top：50％左：50％变换：translate（-50％， - 50％）或任何使用flex方法的显示。

小提琴：https://jsfiddle.net/3mLsL9t5/2/

CSS

.myContainer {
 width: 100px;
 height: 100px;
 background-color: lightblue;
 }

.myImage {
 width: auto;
 max-width: 20px;
 height: auto;
 max-height: 22px;
 border: 1px solid lightslategrey;
 position: relative;
 display: block;
 margin-left: auto;
 margin-right: auto;
 }

Answer 1

请尝试以下css

.myImage {
  border: 1px solid lightslategrey;
  display: block;
  height: 20px;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
  width: 20px;
}
.myContainer {
  background-color: lightblue;
  display: table-cell;
  height: 100px;
  position: relative;
  vertical-align: middle;
  width: 100px;
}

Answer 2

我们开始......让图片成为图片（内嵌）并将其添加到您的.myContainer

display: table-cell;
text-align: center;
vertical-align: middle;

示例代码段

＆＃13;

.myContainer {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.myImage {
  width: auto;
  max-width: 20px;
  height: auto;
  max-height: 22px;
  border: 1px solid lightslategrey;
}

＆＃13;

<div class='myContainer'>
  <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'>
</div>

＆＃13;

更新

或者您可以使用line-height

＆＃13;

.myContainer {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 111px;
}

.myImage {
  width: auto;
  max-width: 20px;
  height: auto;
  max-height: 22px;
  border: 1px solid lightslategrey;
}

＆＃13;

<div class='myContainer'>
  <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'>
</div>

＆＃13;

如果您仍需要某些阻止行为，可以将display: inline-block;添加到图片

更新2

当你询问块元素时，我添加了一个显示该元素的版本。

＆＃13;

.myContainer {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  display: table-cell;
  vertical-align: middle;
}

.myImage {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 20px;
  height: auto;
  max-height: 22px;
  border: 1px solid lightslategrey;
}

＆＃13;

<div class='myContainer'>
  <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'>
</div>

＆＃13;

Answer 3

这可以使用图像的CSS轻松实现：

position: absolute,
left:0,
right:0,
top:0,
bottom:0,
margin:auto

容器的

和position:relative。

.myContainer {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  position: relative;
}

.myImage {
  width: auto;
  max-width: 20px;
  height: auto;
  max-height: 22px;
  border: 1px solid lightslategrey;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

<div class='myContainer'>
  <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'>
</div>

请点击此处Working fiddle

块元素的垂直对齐

3 个答案: