按钮垂直居中内容，但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;
}