Vertical and Horizontal Centered Alignment

Vertical and Horizontal centered alignment using simple HTML/CSS.

by Aqeel Malik

HTML

<div class="box">
  <div class="item">
    <h1>Centered</h1>
    <p>Vertical and Horizontal</p>
  </div>
</div>

CSS

* { margin: 0;padding: 0;}
.box {
  display: flex;
  flex-wrap: wrap; /* optional. only if you want the items to wrap */
  justify-content: center; /* for horizontal alignment */
  align-items: center; /* for vertical alignment */
}
.box {
  height: 100%; width:100%;
  position: absolute; /* also can use position fixed */
  background: white;
}
.item {background: pink; padding:10px}
/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/

JavaScript

/*
Company : Webicosoft.com
Name    : Aqeel Malik (Web Developer)
Email   : [email protected]
Mobile  : +92 302 6262164
Skills  : xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | AngularJS | Jekyll | PHP+MySQL | Photoshop | Firework | Dreamweaver
*/