One of the most common layout challenges in web development is centering a child element inside a parent element. There are many ways to achieve this, but one of the most elegant and flexible solutions is using Flexbox.
Flexbox is a CSS module that allows us to create complex layouts with ease. It lets us align, distribute, and order elements in different directions and dimensions. In this blog post, we will learn how to use Flexbox to center a div inside another div.
The basic idea is to set the parent div as a flex container, and then use the align-items and justify-content properties to center the child div along both axes. Here are the steps:
1. Create a parent div and a child div with some content. You can give them some width and height, and apply some background colors to make them distinct when viewed in your browser.
Here is the starter HTML and CSS code for this (html template from HTML5 Boilerplate):
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- uncomment if you want to use an external style sheet
<link rel="stylesheet" href="">
-->
<style>
.parent {
background-color: linen;
padding: 20px;
width: 100%;
}
.child {
background-color: tomato;
padding: 20px;
width: 300px
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="parent">
<div class="child">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</div>
</div>
</body>
</html>2. In the head part of the HTML document where you have the internal styles inside the style tag, set the display property of the parent div to flex. This will make it a flex container, and its direct children will become flex items.
<style>
.parent {
background-color: linen;
display: flex;
padding: 20px;
width: 100%;
}
.child {
background-color: tomato;
padding: 20px;
width: 300px
}
</style>3. Set the align-items property of the parent div to center. This will align the child div vertically in the center of the parent div.
<style>
.parent {
align-items: center;
background-color: linen;
display: flex;
padding: 20px;
width: 100%;
}
.child {
background-color: tomato;
padding: 20px;
width: 300px
}
</style>4. Set the justify-content property of the parent div to center. This will align the child div horizontally in the center of the parent div.
<style>
.parent {
align-items: center;
background-color: linen;
display: flex;
justify-content: center;
padding: 20px;
width: 100%;
}
.child {
background-color: tomato;
padding: 20px;
width: 300px
}
</style>Here is the complete HTML and CSS code for this (html template from HTML5 Boilerplate):
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- uncomment if you want to use an external style sheet
<link rel="stylesheet" href="">
-->
<style>
.parent {
align-items: center;
background-color: linen;
display: flex;
justify-content: center;
padding: 20px;
width: 100%;
}
.child {
background-color: tomato;
padding: 20px;
width: 300px
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="parent">
<div class="child">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</div>
</div>
</body>
</html>