How to align contents vertically in html?

HTML

<div class="outer">
   <div class="inner">This content is vertically aligned</div>
</div>

CSS3:

.outer {
  display : flex;
  align-items : center;
}

Note:

  • Use ‘justify-content: center;’ to align horizontally
  • and use ‘align-items : center;’ to align vertically

Published by Sandeep Kumar

He is a Salesforce Certified Application Architect having 11+ years of experience in Salesforce.

Leave a Reply