Unlike the method above the content can be dynamic as the div will grow with what’s placed inside. Anything inside this child div will be vertically centered. We can then use vertical-align on the child div and set its value to middle. We set the parent div to display as a table and the child div to display as a table-cell. What if the content you want centered is an image? Will this method work? The answer is yes with one additional line of css. If you use the font shortcut, just make sure to explicitly set the line-height inside. When you use the font shortcut any property you don’t specifically set gets set to its default value. This method relies on you setting the line-height as a value greater than the font-size. You can use any value you want as long as its larger than the font-size that’s been set.Īdded: As Jeff pointed out in the comments below, there’s one small got’cha with this method in that you have to be careful when using the shortcut for the font property. If your text could wrap to a 2nd line you need to use a different method. The above works in all browsers, however it will only work for a single line of text. I don’t think setting the height is necessary, but if line-height alone doesn’t work for you setting the height of the element will likely be the solution. Most tutorials will also set the height on the element with the same value given to the line-height. All we need to do is set a line-height on the element containing the text larger than its font-size.īy default equal space will be given above and below the text and so the text will sit in the vertical center. This method will work when you want to vertically center a single line of text. Which method you choose will depend on what you’re trying to center relative to its container element. Unfortunately vertical-align doesn’t apply to block-level elements like a paragraph inside a div, which is where most of us figure out it isn’t the be all solution to vertical centering.Īll is not lost though, as we have other methods for centering block level elements and we can still use vertical-align where appropriate. With a table cell the values are relative to the table-height-algorithm, which usually means the height of the row.With a line of text the values are relative to the line-height.The values for vertical-align have meaning with respect to a parent inline element.
It also applies to table cells and it works with some inline elements. However valign only worked on table cells. If you’ve come from table based layout you likely used the valign attribute, which would also lead you to believe vertical-align is the way to go. It seems logical and I know it was my first choice. With text-align: center in mind, most people look first to vertical-align in order to center things vertically. When the element is a block level element we give it a width and set the left and right margins to a value of auto. When the element to be centered is an inline element we use text-align center on its parent. Horizontal centering with css is rather easy. Understanding vertical-align and why it doesn’t always work will help us better understand vertical centering in general. Let’s start by first talking about something that doesn’t work as many expect. Clicking the images above each section will also take you to that specific demo. You can view demos of each of the methods below by clicking here. I’ve usually skipped over the topic of vertical centering, since there are some good posts already out there that are easy enough to find, but recently Bikram commented requesting a tutorial on vertically centering so I thought why not. Today I want to present 6 of those methods. There are however a variety of methods for vertical centering and each is fairly easy to use. Centering elements vertically with css is something that often gives designers trouble.