.class { text-align: center; }
//HTML <div class="parent"> <span>Hello World</span> </div> //CSS .parent { display: flex; justify-content: center; align-items: center; }
/* this will center all children within the parent element. */ .parent { display: flex; justify-content: center; /* horizontal */ align-items: center; /* vertical */ }
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
<switch> h1 { text-align: center; } p.date { text-align: right; } p.main { text-align: justify; } </Switch>
.container{ margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: /* Define the width here; */ height: /* Define the height here; */ } /*You have to define the width and height! */
.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }
.center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
margin: auto;