Example 1: css align center
//HTML <div class="parent"> <span>Hello World</span> </div> //CSS .parent { display: flex; justify-content: center; align-items: center; }
Example 2: image center in div
img { display: block; margin-left: auto; margin-right: auto; width: 40%; }
Example 3: center with css
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Example 4: how to center an image element inside a block in css
img { display:block; margin-left: auto; margin-right:auto; }
Example 5: html css center text on page
<style> body { background: white } section { background: black; color: white; border-radius: 1em; padding: 1em; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) } </style> <section> <h1>Nicely centered</h1> <p>This text block is vertically centered. <p>Horizontally, too, if the window is wide enough. </section>
Example 6: center a div
<div id="outer"> <div id="inner">Foo foo</div> </div> //css:, demo with border <style> #inner { display: table; margin: 0 auto; border: 1px solid black; } #outer { border: 1px solid red; width:100% } </style>
Comments
Post a Comment