Example
Objects can be centered by using margin: 0 auto; if they are block elements and have a defined width.
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="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fi.kinja-img.com%2Fgawker-media%2Fimage%2Fupload%2Fs--c7Q9b4Eh--%2Fc_scale%2Cfl_progressive%2Cq_80%2Cw_800%2Fqqyvc3bkpyl3mfhr8all.jpg%26quot%3B%2520%2F%26gt%3B%26lt%3B%2Fdiv%26gt%3B%253C%2Fcode">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;
}
Result:
JSFiddle example: Centering objects with margin: 0 auto;
