将跨度在 div 中垂直居中

Question

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

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

我尝试过 span 上的 >margin:auto 和 div 上的 vertical-align，但它不起作用

编辑：我的 div 和我的span 没有固定的高度，这取决于内容，我把它固定在小提琴上只是为了给你看

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

使用行高=高度：
http://jsfiddle.net/RhNc2/8/

Answer 4

您也可以将这些样式应用于包含的

。不过，line-height 解决方案假设您只需要居中一行文本。

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

Answer 5

这是

#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 寻找解决方案即可。