Centering content in HTML & CSS. Below are all practical ways with real-time examples, from beginner to modern CSS.

Center Text (Horizontally)

Step:1 - Using text-align

How to center text horizontally

-----------------------------------------------------

Center a Block Element (Horizontally)

margin: auto

-----------------------------------------------------

Center Using Flexbox

Perfect Center (Horizontal + Vertical)

-----------------------------------------------------

Center Using CSS Grid

One-line Perfect Center

-----------------------------------------------------

Center Using CSS Transform

How to create a navigation bar with CSS Flexbox

What is Flexbox?

CSS Flexbox helps you easily align items horizontally or vertically, making it perfect for navigation bars.

How to create a basic navigation layout

• Home
• About
• Services
• Contact

Property	Purpose
display: flex	Activates flexbox
justify-content: space-between	Pushes logo left, menu right
align-items: center	Vertically centers items
gap	Adds space between menu items

HTML Basics for Beginners

What is HTML? HTML(HyperText Markup Language) is the standard language used to create web pages. It structures the content on the web — like text, images, links, forms, and more. Basic Structure of an HTML Page Every HTML page follows this basic structure:

Hello World!

This is my first web page

Explanation:

!DOCTYPE html - Document type declaraion for HTML5. Tells browser this is HTML5.

html - Root Element.

head - Page information(Meta, link, title).

body - Visible Content.

h1 - Heading

p - Paragraph.

---------------------------------------------------------------------------

Headings

Main Heading

Sub Heading

Smaller Heading

Sub-sub-section Title/h4>

Further subdivision

Least important heading

Headings go from h1 (largest) to h6 (smallest).

---------------------------------------------------------------------------

Links

Visit Google

a - Anchor tag

href - Link URL

---------------------------------------------------------------------------

Links

src - Image Path

alt - Alternative text

---------------------------------------------------------------------------

Lists

Unorderedlist

• HTML
• CSS
• JavaScript

Orderedlist

1. Step 1
2. Step 2

---------------------------------------------------------------------------

HTML Attributes

Attributes give extra information about elements.

---------------------------------------------------------------------------

Forms Example

Name:

Email:

---------------------------------------------------------------------------