One of the most annoying issues I have with web development is that elements aren't always in the place I need them to be. Especially when they need to be centered. This is one of those simple things in CSS that can be more complicated than it should because of the way CSS styles work. You could have a style on an HTML element that's throwing the whole page off just because you put the code in a different order.
I have a few things I always try when my element isn't centered and between the five of them, one of them typically fixes the problem. So if you're stuck trying to figure out why your HTML element isn't centered, try these things first.
-
Have you checked your divs?
- Did you make sure that the element you're trying to center is in the correct div? I know that sounds simple, but when you have a large web application it's easy to get lost in the code. Check that you have the right class name or id to work with and that you are targeting the right element.
- Make sure your CSS selectors and properties are targeting the right element because if you have the wrong element selected then it'll never be centered.
-
Have you checked your margins?
- Margins are tricky to work with because they can change the width of an element to something you weren't expecting. If you set margins at some other point in your CSS then it could be effecting the element you are currently trying to update. When you set the margins on your current element, you'll want to use:
margin: 0 auto; - Remember, when the margin property is in this format, the first value is for the top and bottom margins and the second value is for the left and right margins. The zero could be another value if you wanted your top and bottom margins to have a specific value like 2rem. The auto value will set the margins on the left and right of your element to be equal which causes your element to be centered on the page.
- Margins are tricky to work with because they can change the width of an element to something you weren't expecting. If you set margins at some other point in your CSS then it could be effecting the element you are currently trying to update. When you set the margins on your current element, you'll want to use:
-
Have you checked your padding?
- You may have a padding value set for some element on your web page that's shifting the element you are trying to center. Check that there aren't any padding values that change the position of your current element. You can check that in a web browser's developer tools by pushing F12 on your keyboard or looking through your CSS code.
- Usually setting a padding value on your element won't throw it off center as long as the left and right padding values are the same. If you look in the developer tools or in your CSS files and see any padding that looks like this or something similar:
padding: 1em 3em 1em 6em;Then you might want to check that out.
-
Have you checked your width?
- The width of your element has a direct impact on the ability for you to center it. If the element doesn't have a set width, that could easily throw it off-center because the browser is determining the element's width on its own. Make sure that your element has the correct width and if you have any doubts, it's usually a safe bet to assign it a value like:
width: 100%; - That way you shouldn't have any weird CSS stuff happening because you the browser was trying to make a decision on the width. Even if you do have a width assigned, check it to make sure the value is correct. That way you'll know for sure that the width isn't keeping the element in the wrong position.
- The width of your element has a direct impact on the ability for you to center it. If the element doesn't have a set width, that could easily throw it off-center because the browser is determining the element's width on its own. Make sure that your element has the correct width and if you have any doubts, it's usually a safe bet to assign it a value like:
-
Have you checked your display type?
- This one took me the longest to figure out. When you are working with a bunch of divs it gets easy to lose track of what div level you're on. Some divs might be floated, some might have an absolute position, and some might have a distinct display type.
- If you check the CSS for a display property on your element and you don't see one, try this:
display: block;This will usually snap that element directly into place. This is most useful for when you don't have a specific display type you need to use.
Hopefully this helps you get your div centered and maybe you learned something else new. If you're just getting started with web development, go download my free HTML tutorial that over 250 people already have. It'll get you up to speed and ends with a challenge if you think you can handle it.
Thanks for reading! :)
Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding
Top comments (3)
display: table;
vertical-align: middle;
Boom!🤣
Thank you so much for the 411. I am new at coding and I am teaching myself along with the internet and with sites such as this one with people such as yourself that have the knowledge and experience to be able to describe in a way that a newbie like myself will be able to understand and I just want to say thank you again for taking time to post this and other things im sure you have posted to help newbies in there journey to becoming whatever they choose to become in tech...
I know I should visit this post over and over again.
Bookmarked