按钮垂直居中内容，但 div 不

Question

以下垂直居中内部div

HTML

<button class="outer">
    <div class="inner">
        Hello<br>World
    </div>
</button>

CSS

.outer {
    position: absolute;
    top: 25%;
    left: 25%;
    bottom: 25%;
    right: 25%;
    padding: 0;
    background: none;
    border: none;
    outline: dashed 1px black;
    font-family: sans-serif;
    font-size: 16px;
    text-align: center;
}

.inner {
   background: #ccc;
}

JSFiddle

但如果我使用div 而不是button 作为外部元素，

出于语义原因，我想要 div 而不是 button。

我需要将哪些 CSS 样式添加到 .outer 类以生成与按钮相同的垂直对齐样式？

我需要这个才能在 Chrome 和 FF 中工作。

Answer 1

这就是你需要的：链接：http://jsfiddle.net/WP8um/2/

或者，如果您不希望外部 div 上的边距，您可以使用 top,left,bottom,right 属性。 http://jsfiddle.net/WP8um/3/

CSS

.outer {
 display: inline;
 margin:25%; 
 background: none;
 outline: dashed 1px black;
 border: none;
 padding: 0;
 width: 200px;
 height:200px;
}


 .inner {
 background: #ccc;
 text-align:center;
 margin: 50% 0;
}