Center header image thesis

/* standar */ div, .flexbox-div { position: relative; width: 100%; height: 100px; margin: 10px; background-color: grey; } img { border: 3px solid red; width: 75px; height: 75px; } /* || standar */ /* transform */ .transform { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ } /* || transform */ /* flexbox margin */ .flexbox-div { display: -webkit-flex; display: flex; background-color: lightgrey; } .margin-img { margin: auto; } /* || flexbox margin */ /* flexbox justify align */ .flexbox-justify { justify-content: center; } .align-item { align-self: center; } /* || flexbox justify align */ <h4>Using transform </h4> <div> <img class="transform" src="http:///250/000/fff" alt="Not By Design" border="1" /> </div> <h4>Using flexbox margin</h4> <div class="flexbox-div"> <img class="margin-img" src="http:///250/000/fff" alt="Not By Design" border="1" /> </div> <h4>Using flexbox justify align</h4> <div class="flexbox-div flexbox-justify"> <img class="align-item" src="http:///250/000/fff" alt="Not By Design" border="1" /> </div>

Center header image thesis

center header image thesis

Media:

center header image thesiscenter header image thesiscenter header image thesiscenter header image thesis