Photo by KOBU Agency on Unsplash
Simplifying Web Design: How to Center HTML Elements with CSS
Learn how to achieve perfect alignment by using these tricks to center html elements on your web page
The process of creating web layouts is not always straightforward, especially when it comes to designing and correctly positioning elements on the webpage. When you have to deal with the difficulty of implementing certain CSS styles, such as centering HTML components/elements in your layout, all the ostensible joy of seeing your code come to life on a webpage is lost.
Every developer has gone through a horrible experience when they had to question all they thought they knew about CSS after yet another failed effort to center HTML components/elements on a page.
Why does it need to be so damn difficult?
The problem in centering components is not in remembering CSS style rules like the justify-content: center property; instead, it is because there are several ways to accomplish this, each of which depends on the specific scenario. This makes it challenging to make a decision. Similar to having to choose your prom outfit since there are so many options.
It's crucial to understand that a method employed to align an element in the center of one web page style, such as layout A, may not be effective in another style. This is because each webpage style has its own set of rules and is unique in its own way.
Just as you would consider the prom party theme and the ideal dress size for your physique when choosing a prom dress, there are certain factors to consider when deciding if you want to center an element on your webpage.
You will have to decide if you want the element centered either;
Horizontally
Vertically
Both horizontally and vertically(by combining the techniques used above in any fashion to center your element perfectly).
Once you've made this decision, centering your elements is significantly easier because all that's left to figure out is which CSS style to apply to get the desired result.
Before, we delve into resolving the age-old problem that many developers face, "How do I center an HTML element(div)?", here are a few things you need to know to follow along in this article:
Basic understanding of HTML and HTML elements
Basic understanding of CSS
Let's get started!
Centering Elements Horizontally
Similar to how each HTML element differs, so do the techniques used to center them horizontally. You must take certain parameters into account in order to center HTML components across the x-axis.
As a result, you must decide if;
The element is a block-level element
💡A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. Commonly used block-level elements are<p>and<div>.center-block{ margin: 0 auto; }The element is an inline element (like <span>, links, and texts)
.center-inline{ text-align:center; }There are two or more block-level elements that need to be horizontally centered in a row.
.center-row{ display: flex; justify-content: center; }
Centering Elements Vertically
Centering elements on the y-axis(vertically) of a web page is a lot trickier because there are a few different factors that can affect the vertical alignment of an element, such as the height of the element, the height of its container, and the padding and margins around the element.
- To center an inline element vertically, you can employ any of these tricks;
// for inline elements on a single line(like nav links) apply equal amount
// of padding to the top and bottom
.nav-link{
padding-top:20px;
padding-bottom:20px;
}
//for texts that wont wrap and dont have a padding issue, make the
// line-height and height equal
.wrap-text-center{
height: 100px;
line-height: 100px;
white-space: nowrap;
}
//for inline elements(like text) that span multiple lines
.center-multiple{
display:flex;
justify-content:center;
flex-direction:column;
- For block-level elements
To center block-level elements vertically, you have to consider If the height of the element is known or not else you can use flexbox.
//element's height is known
.parent-elemet{
position:relative;
}
.child-element{
position:absolute;
top:50%;
height:100px;
}
//element's height is not known
.parent-element{
position:relative;
}
.child-element{
position:absolute;
top:50%;
transform: translateY(-50%);
}
//using Flexbox
.parent-element{
display:flex;
flex-direction:column;
justify-content:center;
}
Centering Elements both Horizontally and Vertically
We combine the methods discussed previously to achieve the goal of centering items along the x- and y-axes.
//using css grid
.parent-element{
display:grid;
place-content:center
}
//using css flex
.parent-element{
display:flex;
justify-content:center;
align-items:center;
}
//element has fixed width and height
.parent-element {
position: relative;
}
.child-element {
width: 500px;
height: 200px;
padding: 30px;
position: absolute;
top: 50%;
left: 50%;
}
//element width and height is unknown
.parent-element {
position: relative;
}
.child-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Bonus Trick: Using Calc()
The calc() function is part of a new syntax in CSS3 in which you can mathematically calculate what size/position your element occupies by using a variety of values like pixels, percentages, etc.
.center{
position:absolute;
height:80px;
width:80px;
top: calc(50% - 80px / 2);
left:calc(50% - 80px / 2);
Conclusion
Every developer should be able to center HTML elements. Knowing how to do this, helps to avoid situations where contents spill over the boundaries of their containers, an element covering up another element on a web page, and other problems that might occur while building web pages.
Unfortunately, centering these HTML elements requires more work than simply clicking a button that centers the element; which I have detailed in this article.
I hope you find this really helpful and I look forward to your thoughts in the comment section.
In CSS, everything can be centered.