CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Layout - Horizontal & Vertical Alignment

CSS has several properties that can be used to align elements on web pages:

Center aligned elements

Horizontally and Vertically


Center Aligned Text

Use text-align: center; to center the text inside an element.

This text is centered

Run code

Center Aligned Image

To horizontally center an image, use display:block; and set margin-left:auto; and margin-right:auto;

Run code

Left and Right Align - Using position

One method for aligning elements is to use position:absolute; and set left or right position:

Run code

Absolute positioned elements are removed from the normal flow and other elements will behave as if it’s not even there.


Left and Right Align - Using float

Another method for aligning elements is to use the float property:

Run code

Center Align Element - Using margins

To horizontally center a block element (like <div>), set margin-left:auto; and margin-right:auto;

Setting the width of the element will prevent it from stretching out to the edges of its container.

The element will then take up the specified width, and the remaining space will be split equally between the two margins.

This div is horizontally center

Run code

Center Align Element - Using paddings

To center vertically, use padding-top and padding-bottom:

This element is vertically centered

Run code

To center both vertically and horizontally, use padding and text-align:center;

This element is vertically and horizontally centered

Run code

Center Align Element - Using position & transform

Use position and transform property to vertically and horizontally center an element:

This element is vertically and horizontally centered
Run code

To learn more about the 2D transforms, visit: CSS 2D Transforms Chapter.


Center Align Element - Using Flexbox

You can use flex layout to center align elements horizontally and vertically:

This element is vertically and horizontally centered
Run code

To learn more about the Flex, visit: CSS Flexbox Layout Chapter.


Positioning Text Blocks Over Image

The following example shows how to position text or text blocks over an image:

Top Left

Lorem ipsum dolor sit amet.

Top Right

Lorem ipsum dolor sit amet.

Centered

Lorem ipsum dolor sit amet.

Bottom Left

Lorem ipsum dolor sit amet.

Bottom Right

Lorem ipsum dolor sit amet.

Run code