在div中将居中垂直居中

Question

我有一个包含span的div，我希望该span垂直和水平对齐到div的中心。

这是小提琴： http : //jsfiddle.net/RhNc2/1/

我试过margin:auto在span和vertical-align在div ，但是不起作用

编辑：我的div和我的跨度没有固定的高度，这取决于内容，我把它固定在小提琴上只是为了向您展示

Answer 1

将此添加到div CSS中：

display:table-cell; text-align:center

工作小提琴在这里： 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
}

边框是为了清楚:)

Answer 2

垂直对齐是一项棘手的事情，我不知道是否有一种行之有效的方法。 最近几年最可靠的技术是使用CSS表布局。 这种方法的唯一缺点是，它可能不适用于过时的浏览器。 不过，以我的经验来看，这可能是最好的整体解决方案。 请参阅下面的示例：

<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> 

这是一个jsFiddle： http : //jsfiddle.net/aGKfd/2/

还有另一种技术，但是它不如上述技术那么简单。 它涉及两个容器，外部容器的位置设置为相对，内部容器的位置设置为绝对。 在内部容器上使用绝对定位，您可以关闭容器，但需要进行一些调整才能使其正确：

<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> 

这是一个jsFiddle： http : //jsfiddle.net/6SWPe/

Answer 3

使用line-height = height： http : //jsfiddle.net/RhNc2/8/

Answer 4

这里是

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

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

和jsFiddle： http : //jsfiddle.net/Simo990/RhNc2/9/

编辑：由于您的div和span高度取决于内容，我的解决方案将不起作用，因为它需要固定的高度和仅一行文本。 只是寻找一个带有position:absolute的解决方案。

Answer 5

您也可以将这些样式应用于包含的<div> 。 line-height解决方案假定您只需要一行文本即可居中。

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