CodePen

Loading ..................

Absolute Centering

Description

Perfect horizontal AND vertical centering in CSS, at any width or height!

Works with percentage based width/height, min-/max- width, images, position: fixed and even variable content heights.

Updated Aug 13: Added a comparison table, an explanation, more documentation, and a Modernizr test for variable height

Updated Aug 16: Minor corrections and clarifications

Updated Jun 6, 2014: Small corrections regarding Windows Phone and blurry rendering with the transforms method

Tags

  1. css
  2. center
  3. modal
  4. vertical

Comments

  1. I think the difficulty with vertical centering with CSS has always been items with variable or dynamic heights. Next challenge, perhaps?

  2. You can achieve vertical center with dynamic heights using CSS3 translate, position absolute, and top/left values. This is all that is required:

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

    The problem is browser support.

  3. @kameelyan Yes, that's a good technique! However, I have experienced issues with blurry rendering when trying that in the past (may have accidentally done a translate3d instead of just translate). Also not quite as cross-browser friendly as Absolute Centering, but just marginally :-)

  4. @sml: The biggest benefit of this technique is the responsive sizing of the centered box. Negative margins never worked quite right if the box varied in width/height with its container.

  5. Now: Death to IE7! Unfortunately I still have to develop for it so I can't use this method :(

  6. @AMKohn: I'm sorry you still have to support IE7! Perhaps you can fall back to a Negative Margins method?

  7. I like to use a sass mixin that uses left: calc(50% - w/2) and top: calc(50% - h/2). Calc is supported in IE9+ and requires only a prefix in safari.

  8. Cool stuff, but what's really cool is the way you presented it to the public.

    Thanks, R

  9. Nice work. I've used calc in the past but it's still temperamental in older versions of safari :( @boltaway

  10. For unknown heights I think this method is the best in terms of browser support. feels kinda hacky, though.

  11. Super useful... already putting it into practice.

  12. @tsi Yeah, I'm not a fan of the hackiness of the inline-block method, but it is a pretty solid way of doing it. I've added a demo to the writeup with some variations.

  13. I'm really thankful for this pen, i mean, im a newbie and Vertical Centering stuff, in a simple way, impossible, but this pen helped me, and i learnt a lot, Thanks again!

  14. Huge Thanks !!! Awesome article and indeed - so many ways to center, but this is just awesome :)

  15. This solves all my problems! Thanks!

  16. The CSS transform method breaks my mobile pages (width's)! Anyone has a solution for this, or just scrap this and go for another method?

    The pages break by increasing in width beyond the device width (using meta viewport tag). Basically the page will now be as wide as it would have needed to be to fit the element after the absolute, left: 50%, but before the transforms. Help would be much appreciated!

  17. @pocketjoso This is likely a limitation of the Transform method. Without testing it myself, I believe the box is drawn in the right position via translate, but is rendered at left: 50% and expands the document beyond device-width. Someone else may know more about transform and how mobile browsers handle it, though :-)

    Most of the other methods work well on Mobile Safari, so they should fit your needs better.

  18. Can I use this on a personal project? Of course I'll give full attribution to it

  19. @christian-fei Use the technique all you want, no attribution or licensing needed! If you think about it when you're done, post a link here so I can see how it's being used "in the wild", but that's not necessary.

    If you're doing a write-up about the technique, then attribution would be appreciated :-)

  20. Hi @shshaw, great work! As we develop web apps for tablets, I noticed that your sample isn't working on Android (4.x) and iPad (iOS 6.1). I solved the problem for Android on my fork http://codepen.io/borissamardzija/full/KArus It seems Android doesn't like position: fixed; and margin: auto; combination. The solution si to put position: fixed; on .Absolute-Center parent div. As you already have it in the parent, I just commented out position: fixed; for .Absolute-Center.is-Fixed for demonstration purposes.

  21. Dear @shshaw. I really want to set up the Modal on a webpage of mine, but am having a lot of a trouble. I want the options for it to open on page load (like the demonstration) and for it open when a button is pressed. If you could get in touch with me as soon as possible, that would be very much appreciated and we can work something out. My email is webmaster@mark-wasley.exofire.net. Kind Regards.

  22. Center elements problem solved ! Thank you !

Leave a Comment Markdown supported. Double-click names to add to comment.

You must be logged in to comment.
  • 253784 Views
  • 23 Comments
  • 1054 Hearts
Loading...
Loading...