Position Absolute - Margin

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

Another to center div horizontally and vertically is to use position absolute from last lesson with the combination of margin property.

Instead of translate(-50%, -50%), use margin-top: 30px; and margin-left: 60px; , for child div with width 120px and height 60px. (for example)

Note: -50% won't work, here, it calculates 50% of the parent size not the child! So you must calculate 50% of the child size and insert it manually.

Challenge

Easy

Center child div using position absolute and margin top and left.

Don't change the given sizes.

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div class="parent">
            <div class="child"/>
        </div>
    </body>
</html>

All lessons in How to Center Div or Text using CSS

1Introduction

What is this course?

2Center Div

Margin Auto Position Absolute - TranslatePosition Absolute - MarginFlex Box Recap Challenge

3Center Text

Text Align Flex Box Final Challenge