Is that how you center in CSS?
How to center in CSS (Cascading Style Sheet)? Its a question that comes into the mind of lots of developers, Some people know some quite useful tricks about how to center things in CSS while others are still wondering what is a best way of dong it. So, What is a best way of centering things in CSS? How you can center things easily in CSS?
People are searching:
How To,,,
“Center in CSS”
“Center Images Using CSS”
“Center a Table Using CSS”
“Center a DIV Block Using CSS”
“CSS Center text (Horizontal and Vertical) inside a DIV block”
“Center Anything With CSS”
Which means this is one of the most asked question in CSS community, Well when it comes to centering things in CSS then there are more than one way of doing it. So which one is better? To be honest you shouldn’t care much about which one is the best way but instead you should care about what works the best, Which one has a better web browser support and believe me that’s what’s important.
There are some common ways of centering things in CSS, First we are gonna begin with those common ways of centering stuffs in CSS all the way to those that are not common among most developers.
Lets begin…
Centering with Margin:
Lets say we have a div and we want to center it, First we need to create a div in HTML and then give it some styles.
HTML
-----<div></div>----
CSS
----body{
background: #ccc;
}div{
background: white;
width: 200px;
height: 150px;
}
Now that we given our ‘ div ’ some styles, It has background and some dimensions. It’s time to center it within its parent element.
As you can see that ‘ div ’ has no parent element, So by default ‘ body ’ is the parent element of the ‘ div ’ element.
So, We are going to center ‘ div ’ inside ‘ body ’ element, For that all we need to do is give ‘ div ’ element a margin of “ 0 auto ” as you can see in example below.
div{
background: white;
width: 200px;
height: 150px;
margin: 0 auto;
}
Remember you can only center “ block ” elements with this method and this method doesn’t work with “ inline-block ” or “ inline ” elements.
Centering with Text-align:
Yes, you heard me right! text-align is not only used to center text on webpage but it can also be used to center other things on a webpage but it doesn’t work like “ margin: 0 auto; ” the method we have tried above.
So, what’s the difference?
The difference is it cannot be used to center any “block , inline or inline-block” element by itself instead you have to use this property on the parent of the elements that you want to center and then all the elements inside that parent element will be centered according to the dimensions of their parent element.
How it works? Let’s take a look!
First we need to create all the elements we want to center.
<section>
<div></div> </br>
<span>Hello</span>
<section>Let’s say you want to center a “ div ” & “ span ” element inside a “ section ” element, How can we do that? Well its pretty easy and all you have to do is give “ section ” element a property of “ text-align: center; ” because all these elements are contained inside a “ section ”element and which make “section” element parent of all these elements.
Now, here’s all the CSS needed to center “ div ” & “ span ” inside “section”.
section{
text-align: center;
}div{
background: white;
width: 200px;
height: 150px;
}
Note: You cannot center any “ block ” element with this method because by default “ block ” level elements take the full width of the browser and that’s why they cannot be centered but you can still use this property to center text inside “ block ” level elements.
Also, Parent of the all the elements that you want to center should be a “block” or “inline-block” level element.
Centering with Position Absolute:
Let’s say you want to center a position absolute element, So how can you do that? Well its not that hard! Here is an example to do just that.
First we need an element that we want to center, Let’s say its “ div ” element.
<div></div>Here is some CSS to give it some dimensions and also to make it absolute.
div{
display: inline-block;
background: white;
width: 300px;
height: 250px;
position: absolute;
}First we need to give it a left of 50%;
div{
display: inline-block;
background: white;
width: 300px;
height: 250px;
position: absolute;
left: 50%;
}Now, All we have to do is give it a negative margin of half the width of the element. Here we have a element of 300px width, So the negative margin-left would be around -150px.
div{
display: inline-block;
background: white;
width: 300px;
height: 250px;
position: absolute;
left: 50%;
margin-left: -150px;
}
Note: If you don’t know the width or height of the element then instead of negative margin you can use negative translate of 50% in both X & Y direction like this.
transform: translate(-50%,-50%);
Right now our element has a position of absolute which means it doesn’t take up any space on a webpage and any element that is created after this element will come in front of it or above it. So, what’s the solution?
Its easy, All you have to do is close your absolute positioned element inside another element and give it a same height as this element which in our case is 300px.
<section>
<div></div>
</section>Now, here is the CSS to make it work.
section{
height: 300px;
}div{
display: inline-block;
background: white;
width: 500px;
height: 550px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
Centering with Flexbox:
You can also use flexbox to center things on a webpage and it’s the most powerful way on aligning items on a page but the reason most people are not using it because of its support. IE 6,7,8,9 Doesn’t support it at all and IE 10,11 has partial support for this.
So, If you use flexbox to center things on your webpage then you must use some backup code for Internet Explorer support because majority of people are still using Internet Explorer even though its hard to believe.
Here you can see the support for flexbox: Click here
Ok, Let’s see how it works, First we need a parent element and child element inside it that we want to center.
<section>
<div></div>
</section>Here are some styles for the div element.
div{
background: white;
width: 200px;
height: 150px;
}Now all we need to do to center “ div ” element inside “ section ” element is to give “ section ” element “ display:flex; ” and “ justify-content: center; ”
section{
display: flex;
justify-content: center;
}
div{
background: white;
width: 200px;
height: 150px;
}That’s it, You can see the results below.
Well, that’s about almost everything you can use to center things in CSS horizontally. Hope you learned alot via this article, If you have any questions feel free to comment below and I’ll be more than happy to answer them.
Or you can tweet me @AmJustSam
Checkout my other article on how to center vertically in CSS — Click Here
Keep Coding…
