Difference between Text-Align-Center and Margin-Auto

In CSS to center an element horizontally, you might think that Flex and Grid can solve your problem. BUT,

text-align: center or margin: auto can also do the trick 🪄

Therefore, knowing the difference between text-align: center and margin: auto will help a lot, it's also a bit tricky in CSS, let me explain their similarities:

Both properties are:

1. used ONLY in block elements.
2. used ONLY to specify horizontal alignment.

The difference:

• margin: auto used to center an HTML element.
• text-align: center used to center an element content.

By the way,

• HTML Element is everything from the start tag to the end tag including HTML tags.
• Element Content is everything between the tags.

It looks a bit overwhelming 😅, look at the picture.

#first-green-box {
    background: green;
    text-align: center;   
}

• First green box we have a width of 100%, because by default a block element takes up the full width available of its parent, in our case, is the Body element, therefore, the element content, the text, will be centered horizontally within its container, opening and closing tag ( <p></p> ).

If we centered the element content to the right, will get this result:

#first-green-box {
    background: green;
    text-align: right;   
}

#second-green-box {
    width: 500px; // new
    background: green;
    text-align: center;   
}

• Second green box is the same as the first, we are just showing and confirming that text-align: center depends on the width of its container, opening and closing tag, not on the Body element.

From it, we conclude that the text inside our <p> Tag will be centered horizontally within the width of opening and closing tag.

#third-green-box {
    width: 500px; 
    margin: auto; // new
    background: green;
    text-align: center;   
}

• Third box, if we added a specific width to our HTML element, and we want to center it within its parent horizontally, I Emphasize here we want to center an element horizontally the HTML Element, not the Element Content, not within its opening and closing tag. we want to center the HTML Element itself within another HTML Element.

In other words, make a block element in the center of another block element.

In this case, we will use the power of margin: auto, no Flex, no Grid only auto, auto, can solve our problem. Therefore, left and right margins will be split equally.

Notice if we remove text-align, the element content will return to the default value of text-align, left, and will have no effect on the HTML element, to be in the center.

#third-green-box {
    width: 500px; 
    margin: auto;
    background: green;
}

We conclude that margin: auto has an effect on the HTML element, not on the element content, this is why when we apply margin: auto on HTML element that its full-width depends on Body element, will not work, nor will it have any effect.

Summary

In a nutshell, if you're trying to center an element horizontally and it doesn't work for you, ask yourself three things:

1. Is this element an HTML element or Element Content?

2. Does this element have a specific width or not?

3. What is its parent?

To be honest with you, the key to this is if you understand the difference between HTML Element and Element Content, you're good to go.

The full code for this image below is available on CodePen.