why I can't center the image vertically and horizontally?

Question

I use display: table to center the image, but It seems not work? why? Any answer I will be appriciatelly. Thank you very much ！I can not find my mistake, could you help me?

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-left: auto;
  margin-right: auto;
  display: table;
  margin-bottom: 60px; 
  text-align: center;
  
}

.wrapper4 img {
  width: 100px;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  
 
}

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="垂直居中demo" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper4">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
    
  </div>
  
</body>
</html>

Possible duplicate of [Best way to center a
on a page vertically and horizontally?](https://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — Shadow, Nov 22 '17 at 03:14

score 0 · Accepted Answer · answered Nov 22 '17 at 03:44

To vertically center this 100px image in this 300px div, you can add a 100px top margin to the image (because 300-100 = 200; 200/2 = 100), and set its horizontal margin to auto. No need for display: table etc.

.wrapper4 img {
  width: 100px;
  height: 100px;
  margin: 100px auto;
}

However, that is not very reusable. Will your images always be 100px? Will they always be square?

If not, you have to account for centering landscape & portrait images of different sizes.

The easiest way to do this, with modern web browsers (anything newer than IE9 from about 2013) is to use Flexbox, as explained in this answer by tombul.

You could apply the flex rules directly to your div element, but again this is not very reusable. Another option is to create a CSS class for an element that centers its contents in a flex container. This CSS class is then applied in the HTML. The wrapper class now just handles the dimensions and appearance of the wrapper; the wrapper img class just handles the dimensions and appearance of the image. The alignment of the image is controlled by the centerFlex class. If you wanted multiple images with left, centered, or right-justification, you could create & apply similar rules to accomplish that.

FYI, you can include all margins with the shorthand syntax margin: top right bottom left, or in pairs margin: top&bottom left&right

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin: 0px auto; 
}

.centerFlex {
  align-items: center;
  display: flex;
  justify-content: center;
}

.wrapper4 img {
  width: 100px;
  height: 100px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="垂直居中demo" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper4 centerFlex">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
    
  </div>
  
</body>
</html>

score 0 · Answer 2 · answered Nov 22 '17 at 04:31

Try this :

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  margin-bottom: 60px; 
  align-items: center;
  
}

.wrapper4 img {
  width: 100px;
  height: 100px;
      margin: 0 auto;
  
 
}

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="垂直居中demo" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper4">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
    
  </div>
  
</body>
</html>

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

The table-cell alignment rules need to be declared on the containing element of the nested element you need to align.

div class="wrapper4"> <!-- containing element (should be table-cell) --->
   <!-- element to align -->
   <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">      
</div>

Code Snippet Demonstration:

An additional containing element has been inserted to wrap the nested img tag - we'll use this contiaining element to declare the table-cell rules to

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-left: auto;
  margin-right: auto;
  display: table;
  margin-bottom: 60px;
}

.wrapper4 .wrapper-cell {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.wrapper4 img {
  width: 100px;
  height: 100px;
}

<div class="wrapper4">
  <div class="wrapper-cell">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
  </div>
</div>

Alternatives

Flex-Box

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-left: auto;
  margin-right: auto;
  display: flex; /* Adjusted */
  margin-bottom: 60px;
  /* Additional */
  justify-content: center;
  align-items: center;
}

.wrapper4 img {
  width: 100px;
  height: 100px;
}

<div class="wrapper4">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>

Absolute Positioning

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-left: auto;
  margin-right: auto;
  display: block; /* Adjusted */
  margin-bottom: 60px;
  /* Additional */
  position: relative;
}

.wrapper4 img {
  width: 100px;
  height: 100px;
  /* Additional */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="wrapper4">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>

Relative Positioning

.wrapper4 {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  margin-left: auto;
  margin-right: auto;
  display: block; /* Adjusted */
  margin-bottom: 60px;
}

.wrapper4 img {
  width: 100px;
  height: 100px;
  /* Additional */
  display: block;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="wrapper4">
    <img src="http://listenwallstreet.com/wp-content/uploads/2016/03/xiaogou.jpg" alt="小狗">
</div>

CodePen Demonstrations

why I can't center the image vertically and horizontally?

3 Answers3

Alternatives