Sometimes we have the necessity to center a content inside a container. It may be a text on a background picture or an image inside a box. This can be easily done via CSS if we know the height of the content, but if these value are unknown it may be a little harder.
Centering image: absolute positioning
The simplest solution is to impose the width and the height of the content, and display it with an absolute positioning at 50% into container. In this case we must define a negative margin equal to half of the content dimensions to achieve perfect centering. This solution is very effective, but it forces us to display images with a fixed size (which is not suitable in responsive web designs).
Centering image and text: jQuery script
If we would like to create “responsive” images (say, pictures which dimensions adjust to visitor screen size) and center them into the container, absolute positioning is not suitable. In this case, we may use a jQuery script to retrieve the size of both content and container and compute the proper margin to obtain centering. This technique has the advantage to be compatible with all major browsers, works with both images and text content, but it requires an extra-call to server (at least for jQuery library) which slows down page loading.
Centering text: table display
Handling with text is more difficult: if we resize the container, text scrolls down and increases the height of the content, making it impossible to center with a simple positioning. If we don’t want to use jQuery, a solution may be display container as a table and content as a table cell. The solution has the advantage to increase container height as the content scrolls down, but has some important drawbacks. First, the content extends to 100% width and 100% height of the container. Second, it’s impossible to define a width for content (width property in content style results ineffective): this can be fixed by defining some padding, but it sounds like a trick and not a solution.
Centering text: ghost element
A nice solution for text centering without using jQuery scripts comes from an interersting post of Chris Coyer. The trick is to create a ghost element before the content with 100% height. Text is displayed as an inline-block element, and this allows us to give it desired size (also percentage values). As said, jQuery is not used and this reduces page loading time, but if user screen is too narrow, text scrolls down and exceeds container height.
In this post, we have compared 4 techniques to center text and images inside divs both horizontally and vertically. We have first analyzed a case of fixed-size content and then considered the case of unknown content dimensions. An important section has been dedicated to text contents, which may have unpredictable height depending on visitor screen size. If you would like to ask something or propose other solutions, please let me know in comments. Thanks for your attention, see you soon!