How to center elements in CSS?

#css #web #design #centering

Introduction
Horizontally: Centering Inline Elements
Horizontally: Centering Block Elements
Horizontally: Centering More Than Block Elements
Vertically: Centering Inline Element - Single Line
Vertically: Centering Inline Element - Multiple lines
Vertically: Center Block Element With known Height
Vertically: Center Block Elements with unknown Height
Vertically: Center Block Elements Using Flexbox
Both Horizontal & Vertical: Fixed Height and Width
Both Horizontal & Vertical : Unknown Height and Width
Both Horizontal & Vertical: Using Flexbox
Both Horizontal & Vertical: Using CSS Grid
Conclusion

1 - Introduction

In this post you will learn how to center elements in CSS in many different ways, but before we get started please notice that we will use some advanced techniques in CSS3 like: flexbox and grid and those techniques are not explained in this post so I will provide some source in the Conclusion section below at the end of that post, so you can learn more about them and You will find the source files in Github.com

Horizontally

2 - Horizontally: Centering Inline Elements

In this method I will use text-align: center; technique.

3 - Horizontally: Centering Block Elements

In the method I will use margin: auto technique.

4 - Horizontally: Centering More Than Block Elements

In this method we do not have just one technique as we did before but we have 3 techniques to center the elements horizontally.

Techniques used:

display: inline-block;
display: flex; and justify-content; center for the parent element.
margin: auto (as we did before).

Technique 1 & Technique 2 (Same result):

Technique 3:

⬆ Go to top ⬆

Vertically

5 - Vertically: Centering Inline Element - Single Line

In this method we will use two techniques for centering; first, we will use padding: ( top and bottom ) values to center the content inside the element vertically, and also use line-height: with the same value of the height after setting the height value.

For example:

padding: 10px 0; Notice: it is not matter to set the left and right value as I set to 0 in this example because it will not effect the centering of the content of an element vertically, but only the value of the padding top and bottom will center the content vertically.
line-height: if you set the height of an element to 100px, so you have to set the value of the line-height prop (for property) to 100px too and if you set the height to 200px you will also need to set the line-height prop to 200px and so on.

6 - Vertically: Centering Inline Element - Multiple lines

Part 1: In this method we will use 3 techniques to center the elements vertically.

1 - Using a table tag in HTML will align the element vertically without writing any CSS code/style that is because the table element has its default CSS prop "vertical-align: middle;" which we will use in the next method.

2 - Setting a display: table; to the parent element (a

for example) and then setting a display: table-cell; and vertical-align: middle; to the child element(s); Notice: by setting a display: table; to an element in this way you are telling the browser to render the element as a table element, in brief display: table; Lets the element behave like a table element; By setting the display: table-cell; and vertical-align: middle; to the child element so it will behave as a td inside/nested in a tr element.

For more information about display prop with its all props and vertical-align prop.

Display: table; and display: table cell in W3 and MDN.
Vertical-align: in W3, CSS Tricks and MDN.

Part 2: In this method we will use another technique called " ghost element ".

This technique is a full-height pseudo-element is placed inside the container and the text is vertically aligned with that pseudo-element.

7 - Vertically: Center Block Element With known Height

In this method we will use position prop and margin-top with a negative value to center the element vertically, In case of we know the height of the element.

For example:

If we want to center a paragraph inside a div we will give the div which is the parent element a position: relative; and the p which is the child element a position: absolute; and a margin-top: and the value will be equal to the height of the element p but in a negative value. so if the paragraph's height is 50px we will set the margin-top: -25px;

Please note: that if you set a padding prop to the child element you will need to increase the margin-top as a negative value as well. For example: if you set the padding to 20px you will need to set the margin-top to -35px.