CSS -- centre align item to the div

css_alignment-2.css

/*
<div calss="parent">
<!--  Can be an image too -->
  <p>Hello world</p> 
</div>
*/

/*  ============== With Flex */

div.parent {
  display:flex;
  align-items: center;
  /*  ... */
}


/*  ============== With Transition - centers only vertically */

div.parent {
  position: relative; /* Important */
  /* ... */
}

.child {
 position: absolute;
 top: 50%;
 transform: translate(0, -50%)
}

/*  ============== General Code */

div{
  position:relative;
  /* ... */
}

p{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}