by: KSPosted on:

How to display element center?

In this post, we will learn how to display elements horizontally and vertically centred, and below are the details.

  • By using CSS alignment properties we will display html elements horizontally & vertically center
  • We will be making parent container as flex or grid container so that we can use alignment property
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
    
<div class="container">
  <div class="content">Text Center</div>
</div>
  • As mentioned above in container class we have added display: flex; property to display it as flex
  • Also we have added align-items: center; property to display content vertically center
  • justify-content: center; will display the content horizontally center