How to do Vertical+Horizontal centering in CSS


Tags: css

Problem :

It regularly occurs that I want to center a css box inside another one both vertically and horizontally. What's the simplest way to do so that satisfies the following constraints?

  • The box should be precisely centered, not approximately.
  • The technique should work in modern browsers and in IE versions back to 8
  • The technique should not depend on explicitly knowing the width or height of either the centered content or the containing box.
  • I generally know the container is larger than the content, but supporting larger content (which then overflows symmetrically) would be nice...
  • The underlying content of the container must still be able to respond to clicks and hovers except where obscured by the centered content

I currently use 4 (!) nested divs to achieve this, with css along the following lines:

.centering-1 {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    text-align:center;
    visibility:hidden;
}
.centering-2 { 
    height:100%; 
    display:inline-table; 
}
.centering-3 { 
    display:table-cell; 
    vertical-align:middle; 
}
.centering-content { 
    visibility:visible; 
}

You can see this in action as a jsbin snippet. However, this approach, while workable, feels like extreme overkill due to the large number of wrapper divs, and it doesn't work with content that's larger than the container. How can I center things in CSS?



Solution :

Horizontal centering is easy:

.inner {
  width: 70%; /* Anything less than 100% */
  margin-left: auto;
  margin-right: auto;
}

But vertical centering is a little tricky. The best technique for modern browsers is to combine inline-block and a pseudo elements. This originates from "Ghost element", the last technique at http://css-tricks.com/centering-in-the-unknown/. It sets adds a pseudo-element and uses inline-block styles get the centering. The CSS:

.outer { 
  height: 10rem; 
  text-align: center; 
  outline: dotted black 1px; 
}

.outer:before { 
  content: ''; 
  display: inline-block; 
  height: 100%; 
  vertical-align: middle;
}

.inner { 
  width: 10rem; 
  display: inline-block; 
  vertical-align: middle;
  outline: solid black 1px; 
}

An example on Codepen: http://codepen.io/KatieK2/pen/ucwgi


For simpler cases, the following may be good options:

For single lines of content, you can do a quick and dirty vertical centering job on the text within an element by using line-height larger than your font-size:

.inner { 
  border: 1px solid #666; 
  line-height: 200%;
}

The solution with widest support is to use a non-semantic table. This works with very old versions of IE and doesn't require JavaScript:

td.inner { 
  vertical-align: middle; 
}

And here is simple solution for known height elements (which could be in ems, not px):

.outer { 
  position:relative; 
}
.inner { 
  position: absolute; 
  top:50%; 
  height:4em; 
  margin-top:-2em; 
  width: 50%; left: 25%; 
}

    CSS Howto..

    How do I put these on the same line?

    How to get the same height on two Bootstrap columns? [duplicate]

    How to only deregister Wordpress stylesheet for non-logged in users?

    Please help me understand how to make my first jquery slider

    CSS: How to set container size equal to background image size

    How are CSS elements combined

    How to add text under every image?

    HTML/CSS: flip3d how to do a 360 degrees with 4 pictures

    How can I force an image to display in its entirety with CSS?

    How to animate through stacked images Javascript

    How can I set my unordered list to be in the middle not in-line (see image)?

    How to set the height with css to 100% and make it fluid?

    How to make a 3d button

    How to replace css class value using angularjs values?

    Added ellipsis for long text but it showing below the text

    How to move items left and right in an html table using css? -

    How do you make a div display two inline items that stretch the width?

    How to specify styles for h:panelgrid in jsf

    How to put inline circles made in CSS under each other when screen scales?

    How to provide default font height or content when

    or has no characters?

    How can I wrap this text so it doesn't overflow past the widget container?

    How do I make my div with six different pictures expand outwards when clicking it?

    How to apply page css to a polymer component

    How do I get the name of div a user must click to appear in a text div?

    How does CSS handle specificity tie?

    How to make background color extend all the way to bottom of page / content?

    what is jquery CSS frame work and how to use the frame work for giving look and feel to the website? [closed]

    How to hide a div with jquery or alternative?

    how to remove css property using javascript?

    How to add border between td's in which are in different tr's?