Centering objects with margin: 0 auto;

This shows a couple of examples using margin: 0 auto to center objects.

HTML

<div class="containerDiv">
  <div id="centeredDiv">
  
  </div>
</div>

<div class="containerDiv">
  <p id="centeredParagraph">
  This is a centered paragraph.
  </p>
</div>

<div class="containerDiv">
  <img id="centeredImage" src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>

CSS

.containerDiv {
  width: 100%;
  height: 100px;
  padding-bottom: 40px;
}

#centeredDiv {
  margin: 0 auto;
  width: 200px;
  height: 100px;
  border: 1px solid #000
}

#centeredParagraph {
  width: 200px;
  margin: 0 auto;
}

#centeredImage {
  display: block;
  width: 200px;
  margin: 0 auto;
}