How to center things with CSS

29 Nov, 2018

Being able to center text, divs and images is one of the most important things that you can utilize to create clean and modern websites. However, there are a few different ways to go about the problem, depending on the situation.

For centring text, it's pretty straightforward. One line is all you need to get the job done.


h1{
  text-align: center;
}
		

Next, if you need to center a div or image you can use auto margins on the left and right. This technique will only work if the div/image has display: block.


#some_div{
  display: block;
  margin: 0 auto;
}
		

Last but definitely not least, if you need to center an element both horizontally and vertically or your working with positioned elements, for example absolute, or fixed etc. Then the previous method won't be of much help. Instead, you will need to center the element with top/bottom/left/right and then shift the element back 50% of its width and height.


#some_div{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
		

Other Tutorials

View All

Triggering vibrations from your website

javascript


Most common mobile browsers (excluding safari) allow you to trigger the device's vibration motor from your web application using the Vibration API. The Vibration API is provided to you by the mobile browser itself.

Handy Python tricks for beginners

python


When first starting out in a language like Python, things tend to move a bit slow until you learn how to use the built-in functions and operators which exist to speed up the development process. So this tutorial will try to mitigate that problem.

Building a custom chromecast web app

html - javascript


Chromecasts make streaming your favourite songs, games and movies easy. But if you're like me, you might be wondering what's going on behind the scenes when you cast an app, and how you can build your own.

karnamalone@gmail.com