Vertically centering a span in a div

Question

I have a div containing a span and I want the span to vertically and horizontally align to the center of my div.

Here's the fiddle : http://jsfiddle.net/RhNc2/1/

I've try margin:auto on the span and the vertical-align on the div, but it's not working

EDIT : My div and my span don't have a fixed height, it depends of the content, i've put it fixed on the fiddle just to show you

Answer 1

Add this to the div CSS:

display:table-cell; text-align:center

working fiddle is here: http://jsfiddle.net/sdoking/DCT85/

CSS:

#myDiv {
border:1px solid black;
height:50px;
width:200px;
vertical-align:middle;
display:table-cell; 
text-align:center
}

#mySpan {
width:100%;
border:thin blue solid
}

Borders are for clarity :)

Answer 2

Vertical alignment is a tricky business, and I don't know if there's one tried-and-true way. The most reliable technique available in the last couple of years is to use a CSS table layout. The only downside to this approach is that it may not work on outdated browsers. Still, in my experience this is probably the best overall solution. See my example below:

<style type="text/css">
    #container {    
        display:table;    
        border-collapse:collapse;  
        height:200px;  
        width:100%;
        border:1px solid #000;
    }         
    #layout {    
        display:table-row;   
    }           
    #content {    
        display:table-cell;  
        text-align:center; 
        vertical-align:middle;    
    }           
</style>

<div id="container">    
    <div id="layout">    
        <div id="content"> 
            Hello world! 
        </div>     
    </div>   
</div> 

Here's a jsFiddle: http://jsfiddle.net/aGKfd/2/

There's another technique, but it's not as foolproof as the above technique. It involves two containers, with the outer container's position set to relative and the inner set to absolute. Using absolute positioning on the inner container you can get close, but it requires some tweaking to get it just right:

<style type="text/css">
    #vertical{ 
        position:absolute; 
        top:50%;     
        left:0; 
        width:100%; 
        text-align:center;
    } 
    #container {
        position:relative;
        height:200px;
        border:1px solid #000;
    }
</style>         
<div id="container"> 
    <div id="vertical"> 
        Hello world! 
    </div>               
</div> 

Here's a jsFiddle: http://jsfiddle.net/6SWPe/

Answer 3

use line-height = height: http://jsfiddle.net/RhNc2/8/

Answer 4

Here it is

#myDiv{
    border:1px solid black;
    height:50px;
    width:200px;
}

#mySpan{
    display:block;
    text-align:center;
    line-height:50px;
}

And the jsFiddle: http://jsfiddle.net/Simo990/RhNc2/9/

Edit: since your div and span height depends of the content, my solution will not work, because it needs fixed height and only one row of text. Just look for a solution with position:absolute.

Answer 5

You can also just apply these styles to the containing <div>. The line-height solution assumes you only need one line of text to be centered though.

#myDiv{
    border:1px solid black;
    height:50px;
    width:200px;
    text-align:center;
    line-height:50px;
}