Flex Box
Lesson 5 of 9 in Coddy's How to Center Div or Text using CSS course.
Probably the best way to center a div is Flexbox (or anything!)
Flexbox is a responsive method and does not require any margin or positional calculations.
To use flexbox, in the parent div, add display: flex; this will make the parent div a flexbox. To center everything inside the parent use align-items: center; and justify-content: center;
In total,
#parent {
display: flex;
align-items: center;
justify-content: center;
}Notice: there is no need to add anything to the child div!
Challenge
EasyCenter the child div using flexbox.
Try it yourself
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="parent">
<div id="child"/>
</div>
</body>
</html>