As a Web UI developer or for aspiring Web UI developers a common scenario is to center div element or centering the images or centering contents inside div elements. Also it’s a frequently asked question in all the interviews you have given or taken :P. And I know this can be really painful and we have multiple workarounds for the same. I have tested multiple solutions and here I am compiling all of them in one place.

With this tutorial we will achieve following things with Position property and Flexbox module:

  1. Align Image in center
  2. Content inside div to be centered.
  3. Vertically align items this can be span, p or even another div inside the div
  4. Vertically + Horizontally align items inside the div
  5. Align items to the left, right, right-bottom, left-bottom and middle of container div.

Before starting, here is quick introduction to Flexbox and why to choose Flexbox.

Sometimes it’s not the text that needs to be centered, but the block as whole. The way to do this is by setting ‘margin’ to ‘auto’ or ‘margin-left and margin-right’ to ‘auto’.

<h1> Center the div or other block-level-elements with Content inside it </h1><div class="centerdiv"><p>Content inside div to be centered.</p></div><h3>To work with image, make display property of image to block and then apply margin auto</h3><image class='centerimage' src='https://www.gstatic.com/webp/gallery/1.jpg' alt='no image found' /><style>h1,p {color: red;}.centerdiv {border: 1px solid blue;height: 100px;width: 400px;margin: auto;    /* step 1 */text-align: center; /* step 2 if needed all the Contents inside the                        div will be centered */
/* margin-left margin-right auto will also center div */
/* margin-left: auto;margin-right: auto; */}.centerimage {display: block; /* step 1 */margin: auto; /* step 2 */width: 100px;height: 100px;}</style>
Output of above code snippet.

There are many ways to center an element vertically in CSS.

Way 1: Set display property to table-cell and vertical-align property to middle.

Way 2: With Flex we can easily align the items to center with display, align-items property.

Way 3: With position property, items can be positioned according to our need using top, bottom, left and right properties.

<h3>Vertically align items in div</h3><div class="verticalalign"><p>Contents are vertically aligned. <br />
Multi line.
</p></div><h3>Vertically align items in div with FlexBox</h3><div class="verticalalignflex">
<p>Contents are vertically aligned.</p>
</div>
<h3>Vertically align items in div with Position</h3><div class="verticalalignposition"><span> Contents are vertically aligned.</span></div><style>p {color: red;text-align: center;}.verticalalign {height: 100px;width: 300px;border: 1px solid blue;display: table-cell;vertical-align: middle;}
.verticalalignflex {
border: 1px solid blue;height: 100px;width: 300px;display: flex; /* Step 1 */align-items: center; /* Step 2 *//* justify-content: center; *//* Step 3 for Horizontal center */}
.verticalalignposition {
border: 1px solid blue;height: 100px;width: 300px; position: relative;}.verticalalignposition span {position: absolute;color: red;top: 50%;margin: 0;/* without transform property items will be little lower */
transform: translate(0%, -50%);
/* text-align: center; this will not work to horizontally align center *//* vertical + horizontal align use below transform */
/* left: 50%;
margin-right: -50%;transform: translate(-50%, -50%); */}</style>
Output of above code snippet.

For Vertical + Horizontal alignment remove commented styling for above code snippet.

Output with Horizontal center align

Aligning elements to div corner and center.

<h3>Elements to Left, Right, Bottom-right, Bottom-left and Center with Position property</h3><div class="main"><div class="leftdiv">Left Content</div><div class="rightdiv">Rigth Content</div><div class="bottomrightdiv">Bottom Rigth Content</div><div class="bottomleftdiv">Bottom Left Content</div><div class="centre">Center</div></div><style>
.main {
border: 1px solid blue;height: 500px;width: 500px;position: relative;margin: auto;}.rightdiv {right: 0;}.centre {margin: auto;top: 50%;left: 50%;transform: translate(0, -50%);}.bottomleftdiv {bottom: 0;left: 0;}.bottomrightdiv {bottom: 0;right: 0;}.leftdiv,.rightdiv,.centre,.bottomleftdiv,.bottomrightdiv {border: 1px solid red;position: absolute;}</style>
Output for corner elements

Code available at : https://codesandbox.io/s/ly9qv9yq69

#Scripting..