Center Elements With CSS

Here is a technique about how you can absolute center position an element on the horizontal and vertical in CSS.

#Center Images Horizontally

To center something on the horizontal in CSS it's quite easy all you need to do is set the width on the element and apply an auto margin-left and margin-right on to the image. The browser will work out the exact margin on both the right and left side of the image. This will position the image in the center of the parent element just by using the width and the margin properties.

<img src="example.html" alt="Center Images" />

img {
     width:250px;
     margin: 0 auto;
}

#Center Images On Horizontal and Vertical

Setting the image to be center on the horizontal is easy you just need to set an auto on the left and right margin. But to set the image on the vertical and on the horizontal you need to set the margin on the top and left of the element. The following technique is something you can use to display a pop-up window to show an image gallery in the center of the screen. This example will center the image with a width of 250px, first to set the image to be absolute positioned and set the top and left property to be 50%. This will position the image in the middle of screen, but the image won't be exactly center.

img {
   height: 250px;
   left: 50%;
   position: absolute;
   top: 50%;
   width: 250px;   
}

The top left corner of the image will be the exact center of the screen, to move this point to the center of the image we need to move the image half it's width and half it's height. To move the image on half it's width and half it's height you need to add a margin-top which is negative half the height of the image and a margin-left which is negative half the width of the image.

img {
   height: 250px;
   left: 50%;
   margin-top: -125px;
   margin-left: -125px;
   position: absolute;
   top: 50%;
   width: 250px;   
}

#Update: Center Element Without Knowing The Size

The problem with the above technique is that you must know the height and width of the image so that you can use the negative margins of half the image size. If you tried to use negative percentages in the margins like below it will not work.

img {
   height: 250px;
   left: 50%;
   margin-top: -50%;
   margin-left: -50%;
   position: absolute;
   top: 50%;
   width: 250px;   
}

So we need to have a solution to be able to center position this element in the middle of screen and not know what size it is. The best option to do this is to use percentage values to position the element. When you absolute position a element in top:50% and left:50% the top left corner of the element will be exactly in the middle of the screen but we need to move this point to the center of the element. Thanks to article on Codrops Nifty Modal Window Effects. Mary Lou demonstrated how you can exactly position an element in the middle of the screen by just using CSS and she does this by using the transform property and translate(-50%, -50%), which will move the element back on the x-axis by 50% and back on the y-axis by 50%.

img {
   height: 50%;
   width: 40%; 
   transform: translate(-50%, -50%);
   position: absolute;
   top: 50%;  
   left: 50%;
}

You still need to use browser prefixes with this property, to check which browsers support this have a look at caniuse.

#Further Techniques

If you are looking for further techniques on how to center an element in the absolute center Smashing Magazine released a great article giving a number of different techniques. For example there is a technique to absolute center the element by using margin: auto, with absolute positioning.

div
{
    height: 100px;
    width: 100px;
    margin: auto;
    position: absolute;  
    bottom: 0; left: 0; top: 0; right: 0;
}

Absolute Vertical Centering

#Vertically Align An Element

If you want to vertically align any element inside it's parent then you can use a technique similar to above and change the position of the element to be 50% of it's parent then transform on the Y-axis to -50% to move the element back to the center point of itself.

.vertically-align-center-child
{
    top: 50%; 
    transform: translateY(-50%);
}

#Vertically Align An Element With SASS

If you are a user of SASS and want to be able to easily vertically align an element then you can use the following SASS mixin to align any element.

@mixin vertical-align 
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

With this mixin available you can now use this on any element by using the include keyword.

.vertically-align
{
   @include vertical-align;
}