Margin Auto

Lesson 2 of 9 in Coddy's How to Center Div or Text using CSS course.

To center a div horizontally, you can use the margin property to auto.

The auto value will take all the remaining horizontal space.

margin: auto;

Also margin-left: auto; and margin-right: auto; will work!

Notice: it won't center it vertically!

Challenge

Easy

Using what you learned center horizontally the blue box inside the red one.

Notice the value of margin-left will be 75px instead of auto, why?

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="red-box">
            <div id="blue-box" />
        </div>
    </body>
</html>

All lessons in How to Center Div or Text using CSS

1Introduction

What is this course?

2Center Div

Margin AutoPosition Absolute - Translate Position Absolute - Margin Flex Box Recap Challenge

3Center Text

Text Align Flex Box Final Challenge