Centre Objects in css

Question

I have this HTML code:

<div class='container'>
      <div class="post-container">
        <div class="post-thumb"><img src="../images/logo.png" /></div>
      </div>
      //A few other thigs
    </div>

The post-container is above the other stuff.
Now I want to centre the post-thumb div in the post-container and the image in the post-thumb.
But how to do that?

Here is the CSS:

.post-container {
  overflow: auto;
  text-align:center;
}

.post-thumb {
  width:230px;
  height:50px;
  overflow:hidden;
  text-align:center;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.post-thumb img {
  width:100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.container {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 1px 1px 5px #ddd;
  width: 250px;
  height: 100%;
  background-color: #2e3233;
}

Using flexbox https://stackoverflow.com/questions/25311541/how-to-vertically-align-text-inside-a-flexbox; another approach http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ — Morpheus, Nov 15 '18 at 13:51
You mean you want it centered vertically? because horizontally it is already centered — Webdeveloper_Jelle, Nov 15 '18 at 13:58

score 1 · Accepted Answer · answered Nov 15 '18 at 13:57

Use flexboxes to center things:

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

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

.post-thumb img {
  max-width:100%;
}

here's a fiddle https://jsfiddle.net/hwuLrn43/1/

Centre Objects in css

1 Answers1