在曲線盒內創建一個居中的曲線盒

我得到了另一個css問題，希望能夠快速解決。我試圖簡單地使用一個背景顏色的文本彎曲框，垂直和水平居中在另一個顏色的另一個彎曲框內。我嘗試使用邊框寬度屬性爲一個框，但只彎曲框的外部邊框，而不是內部邊框額外。我幾乎有它的工作，但它不是垂直居中。這不能太難，但我打磚牆。這裏是代碼：在曲線盒內創建一個居中的曲線盒

<html> 
<head> 
<style type="text/css"> 
div#outer { 
    margin:0 auto; 
    width:100%; 
    height:50px; 
    background-color:#0000FF; 
    border-radius:5px; 
    -webkit-border-radius:5px; 
    text-align:center; 
} 

#inner{ 
    margin:0 auto; 
    width:95%; 
    height:40px; 
    margin-top:5px; 
    display:block; 
    background-color:#ff0000; 
    border-radius:5px; 
    -webkit-border-radius:5px; 
    color:#FFF; 
    font-size:24px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    line-height:40px; 
    text-align:center; 
} 

</style> 
</head> 
<body> 
<div id="outer"><div id="inner">Centered Text goes here</div></div> 
</body> 
</html>

來源

2012-01-26 user1100412

http://jsfiddle.net/FHEB3/ –

啊，我愛這裏的每個人！添加位置：相對，頂部：5px修復了問題！謝謝Zoltan！ – user1100412