CSS Align Content to Right, Center, Bottom of Screen

Left Aligned Content

Center Aligned Content

Right Aligned Content

With the help of CSS, we can easily align HTML elements and/or contents to anywhere on the web like center, right, bottom etc.

Align Element/DIV to Center of Screen Horizontally

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 130px; margin: auto; padding: 12px;
         background-color: crimson; color: white;}
   </style>
</head>
<body>

   <div>fresherearth</div>
   
</body>
</html>

Output

fresherearth

Note - The margin creates blank area or space around specified element.

Note - The padding creates space or gap between the border and the content of specified element.

Align Element/DIV to Right of Screen

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 130px; float: right; padding: 12px;
         background-color: crimson; color: white;}
   </style>
</head>
<body>

   <div>fresherearth</div>
   
</body>
</html>

Output

fresherearth

Note - The float defines whether the specified element should float to left or right on the screen.

Align Element/DIV to Center of Screen Vertically

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.container{display: flex; height: 100vh; align-items: center;}
      div.container > div{background-color: crimson; color: white;
         padding: 12px;}
   </style>
</head>
<body>

   <div class="container">
      <div>fresherearth</div>
   </div>
   
</body>
</html>

Output

fresherearth

Note - The display: flex; declaration is used to convert the specified element/DIV to flex container.

Note - The align-items is used to align items inside the flex container.

Note - The vh in 100vh refers to vertical height. Therefore, 100vh is used to apply the 100% height of the curren screen.

Align Element/DIV to Bottom of Screen

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.container{display: flex; height: 100vh; align-items: flex-end;}
      div.container > div{background-color: crimson; color: white;
         padding: 12px;}
   </style>
</head>
<body>

   <div class="container">
      <div>fresherearth</div>
   </div>
   
</body>
</html>

Output

fresherearth

Align Element/DIV to Center of Screen

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.container{display: flex; height: 100vh; align-items: center;}
      div.container > div{background-color: crimson; color: white;
         padding: 12px; margin: auto;}
   </style>
</head>
<body>

   <div class="container">
      <div>fresherearth</div>
   </div>
   
</body>
</html>

Output

fresherearth

These examples are just demo, showing how an element or content gets aligned on the web. You can apply your own CSS code to do the job based on your requirement.

Note - You can use either the Grid Layout or the Flex Layout model to do the alignment job.

Note - You can wrap the IMG tag inside an element say a DIV to align the image wherever you want on the web, in similar way as done in above examples.

CSS Online Test

« Previous Tutorial Next Tutorial »