Learning CSS with Less - Centering content
Learning CSS with Less - Centering content
"Learning CSS with Less" technical tutorial series gets better and better with each article. Each part of this series comes as a new puzzle piece from a whole - and we really feel that the passion and dedication with which Andrei formed this course are the keys that will make this puzzle a successful one in the end.
We created the Technical Blog section out of a desire to share the knowledge gathered over the years of hard work by senior developers from our community - helping you become one of the top 1% software developers in the world.
Now... Let's discover the next part of "Learning CSS with Less". Enjoy!
- Topics of discussion
- Centering using margin and width
- Centering with text-align
- Even more ways of centering content
1. Topics of discussion
In this tutorial, we are going to look at the many ways in which we can center content in CSS. So, let's have some fun.
2. Centering using margin and width
Centering content is something that sounds simple on paper but can be quite tricky to obtain if you do not know some subtleties with regards to how CSS works.
The most common way in which one can center content is by using the width and margin properties for an element. This way of centering is fairly easy to obtain with the following CSS code:
.margin-center {
width: 90%;
margin: 0 auto;
}The most important thing to remember is that this method works as long as your width value is less than 100%. You can use pixel values instead of percentage values.
3. Centering with text-align
Centering with text-align is also fairly easy to do. It does require you to place the content of an element inside a parent element though. The HTML for this scenario would look like this:
And the CSS code would look something like this:
.inline-block-center-container {
text-align: center;
.inline-block-center {
display: inline-block;
}
}As you can see, it's a bit more complex than the other since it requires an extra HTML element, but nothing too hard.
4. Even more ways of centering content
There are two more ways in which you can center content. The first one involves using absolute positioning. This one is a bit trickier to obtain than the previous ones. Essentially, your HTML code for this scenario would be the following:
And your CSS would look something like this:
.absolute-center-container {
position: relative;
.inline-block-center {
position: absolute;
width: 300px;
left: 50%;
margin-left: -150px;
}
}Notice the width and margin-left values for this one. As you can see, the margin-left value is equal to negative half of the width of the element. This helps you center the content exactly in the middle of the page, rather than relying on the left edge of the content box to be the one guiding the position, which would have been the case if we only used the left property.
And finally, one more interesting way in which you can center content is by using the flexbox model or flex display. The CSS code for this is the following:
.flex-center {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}Note that the techniques described in this tutorial allow you to center content horizontally. You can center content both horizontally and vertically by using the transform function alongside absolute positioning, like so:
.center-horizontal-vertical {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}And with that piece of code, we conclude this tutorial. In the next one, we are going to discuss flex display in more detail, so see you then.