块元素的垂直对齐

Question

how can i vertical align this image that is already horizontally aligned with display: block; margin-left: auto; margin-right: auto;

NOTE THAT I CANT USE top:50% left:50% transform: translate(-50%,-50%) or any display with flex methods.

fiddle : 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

please try below 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

Here we go ... just let the image be an image (inline) and add this to your .myContainer

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

Sample snippet

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

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

---

Update

Or you can use line-height

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

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

If you still need some block behavior, you can add display: inline-block; to the image

---

Update 2

As you asked about block element, I added a version showing that too.

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

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

Answer 3

This can be easily achieved using the CSS for the image:

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

and position:relative for the container.

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

Please check here Working fiddle