Now this is the issue that we were facing form a long time. To align an element center horizontally we have been using margin: 0 auto and to align an element center vertically is even more difficult. But with the use of flexbox it is very easy.
Now let us see an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Centering an Element</title>
</head>
<body>
<h1>OMG, Im centered</h1>
</body>
</html>
This is just the html code where i want the heading element h1 to align center inside the body.
The actual magic happens here:
body {
margin: 0;
height: 100%;
width: 100%; /* width needed for Firefox */
/* old flexbox - Webkit and Firefox. For backwards compatibility */
display: -webkit-box; display: -moz-box;
/* middle-aged flexbox. Needed for IE 10 */
display: -ms-flexbox;
/* new flexbox. Chrome (prefix), Opera, upcoming browsers without */
display: -webkit-flex;
display: flex;
/* old flexbox: box-* */
-webkit-box-align: center; -moz-box-align: center;
/* middle flexbox: flex-* */
-ms-flex-align: center;
/* new flexbox: various property names */
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center; -moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
background: white url(img/suprise.jpg) no-repeat center;
background-size: auto 100%;
}
This looks like a lot of code because I have added the extra code so to avoid any incompatibility with the browser but the only thing that you need to focus are these:
body {
display: flex;
justify-content: center;
align-items: center;
}
Now lets us see how the flexbox works. To enable flexbox we have to change the display of the element to the flex.
body {
display: flex;
}
I have changed the display of body element from block to flex as the heading element to be centered is inside the body element. This enables the body to use the flexbox layout rather than the default block layout and because of this all of the children of the body will now become flex items.
Now the advantage that the element gained are :
- They can flex their size and position relative to the available space.
- They can be laid out either horizontally or vertically.
- They can even achieve source-order independence.
Centering Element Horizontally
Previously to align h1 element center horizontally we would have used auto margins. But with the help of flexbox this is very easy. By default flex items are laid out horizontally, so to make an element align center we just have to tell flexbox to align its element center.
body {
display: flex;
justify-content: center;
}
The justify-content property will align element along the main-axis.
Centering Element Vertically
To align h1 element center vertically is as easy as centering horizontally we just have to use appropriate property. To center an element vertically we have to align it along the cross-axis. The cross-axis is basically the axis perpendicular to the main one. So, if flex items are aligned horizontally, then the cross-axis would be vertical, and vice versa.
body {
display: flex;
justify-content: center;
align-items: center;
}
The align-content property is set to center which will align the element along the cross-axis.
There are other values associated with justify-content and align-content. Feel free to experiment with them.
0 Comment(s)