html - 不使用高度 100% 垂直居中 div 的内容

Question

嘿伙计们，我正在尝试将 2 个 div 的内容垂直居中，基本上我的结构是这样的:

<div>
    <div class="left">
            <span>
             ONCE YOU <br>  
             PICK US, <br>
             YOU WILL <br>
             NEVER <br>
             WANT TO <br>
             GO <br>
             ANYWHERE <br>
             ELSE <br>
            </span>                 
    </div>
    <div class="right">
            <span>Abouts us</span>
            <button class="about-btn"><a href="#">Know More</a></button> 
    </div>
</div>

我使用的技术如下，这是我从 stackoverflow 示例的解决方案中提取的:

                   span:after {
                        content:'';
                        height: 100%;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    span {
                        display:inline-block;
                        vertical-align:middle;
                        font-weight: 700;
                        letter-spacing: -3px;
                        height: 100%;
                    }

此解决方案的问题在于，它不是 div 中的唯一内容，因此我无法提供跨度 height:100%就好像我必须在跨度之后出现另一个元素，并且由于跨度的高度为 100%，因此元素被推到主容器之外。

fiddle here.

另外一个问题是 <div class="left"> 的内容不使用此技术垂直居中。

我也在尝试 display:table 解决方案，但这似乎弄乱了布局。

有人可以帮我解决这个问题吗

EDIT:: 我试图关注 this解决方案，通过 hashem 。

谢谢。

亚历克斯-Z。

Answer 1

下面是如何使用表格布局完成的:

http://jsfiddle.net/xe6n14xq/

识别父 a 使其成为一个表:

#wrap {
display: table;
width: 100%; // displaying as table makes the content shrink-wrap
}

然后 children 可以变成垂直对齐的表格单元格:

.right, .left {
height: 500px;
width: 50%;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 3em;
}

您还可以对 child 的内容进行垂直变换:

http://jsfiddle.net/0sop57yc/

span, .about-btn {
display: block; // Chrome apparently doesn't agree with inline-block here
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

编辑 - 不确定是谁为表格添加了 width: 100% 但这是一个很好的修复，谢谢。