7 September 2023

Center content, both horizontally and vertically, inside a div. To center text both horizontally and vertically inside a div block using Flexbox and defining both width and height, you can follow this snippet.

Source code viewer
  1. <style type="text/css">
  2. .centered-content {
  3.   /* Use Flexbox. */
  4.   display: flex;
  5.   /* Center horizontally. */
  6.   justify-content: center;
  7.   /* Center vertically. */
  8.   align-items: center;
  9.  
  10.   /* Set a specific width. */
  11.   width: 300px;
  12.   /* Set a specific height. */
  13.   height: 200px;
  14. }
  15. </style>
  16.  
  17. <div class="centered-content">
  18.   Your Centered Inline Content Goes Here
  19. </div>
Programming Language: HTML