DEV Community 👩‍💻👨‍💻

Mohamed Atef
Mohamed Atef

Posted on

How to center elements in CSS?

Table Of Contents

  1. Introduction
  2. Horizontally: Centering Inline Elements
  3. Horizontally: Centering Block Elements
  4. Horizontally: Centering More Than Block Elements
  5. Vertically: Centering Inline Element - Single Line
  6. Vertically: Centering Inline Element - Multiple lines
  7. Vertically: Center Block Element With known Height
  8. Vertically: Center Block Elements with unknown Height
  9. Vertically: Center Block Elements Using Flexbox
  10. Both Horizontal & Vertical: Fixed Height and Width
  11. Both Horizontal & Vertical : Unknown Height and Width
  12. Both Horizontal & Vertical: Using Flexbox
  13. Both Horizontal & Vertical: Using CSS Grid
  14. 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.

Alt Text

3 - Horizontally: Centering Block Elements

In the method I will use margin: auto technique.

Alt Text

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:

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

Technique 1 & Technique 2 (Same result):

Alt Text

Technique 3:

Alt Text

⬆ 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:

  1. 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.
  2. 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.

Alt Text

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.

Alt Text

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.

Alt Text

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.

Alt Text

8 - Vertically: Center Block Elements with unknown Height

In this method we will use transform: translate(x, y); technique as a negative value for y.

Alt Text

9 - Vertically: Center Block Elements Using Flexbox

In this method we will use the Flexbox technique to center element vertically.

Alt Text

10 - Both Horizontal & Vertical : Fixed Height and Width

In this method we will use some techniques same as the techniques we use before in this post you can make sure from the sources on Github the link in the Intro section at the top.

Alt Text

11 - Both Horizontal & Vertical : Unknown Height and Width

In this method we will also use some techniques same as the techniques we use before in this post you can make sure from the sources on Github the link in the Intro section at the top.

Alt Text

12 - Both Horizontal & Vertical: Using Flexbox

In this method we will use flexbox technique.

Alt Text

13 - Both Horizontal & Vertical: Using CSS Grid

In the method we will use CSS Grid technique to center the element horizontally and vertically. For more information about CSS Grid look at the conclusion section below at the end of this post.

Alt Text

⬆ Go to top ⬆

14 - Conclusion

Now, you can totally center elements in CSS with many different way so easy.

And before you go, let me tell please share this post if you benefited from it and Happy New Year 🎄❄💖🎁🎄 Merry Christmas!

The source of this post: Unique Coderz Academy Youtube channel but in Arabic Language.

For other resources:

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.