Skip to main content

Posts

Showing posts from May, 2022

Center element horizontally and vertically to center of screen using plain CSS - Deesan Tutorials

Hello there!!! In this post you will learn the solution to one of the most sought after problems for web designers: Centering a div both horizontally, and vertically Here is the end result: Here is the youtube tutorial: So let's get our hands to work Step 1: Initialize So this is just the basic stuff of every HTML page: DOCTYPE, html, head and body tags. Just fire up your code editor and paste the following code: 1 2 3 4 5 6 7 8 9 10 11 <html> <head> <title> Center element </title> <style> </style> </head> <body> </body> </html> This just creates an empty HTML document Step 2: Elements So, for this tutorial, we are just creating a parent div with a child div in it which we will center shortly. For now, enter the following code in the body tag: 1 2 3 4 5 <div class= "parent" > <div class= "child" > </div> </div> Th...