高度不固定时垂直居中

《高度不固定时垂直居中》

语言表达能力有限,直接上图。我想做的效果就是左侧是导航标题,右侧是对应的内容条目。
但是右侧内容条目数目不固定,因此对应的高度也不固定。这效果看似简单,但本人半天没想出来,苦读一天文档,终于找到解决方案(angularjs写的)。

<style>
.itemGroup {
    position: relative;
}

.itemGroupTitle {
    text-align: center;
    color: white;
    font-weight: bold;
    position: static;
}

.itemGroupTitle1 {
    position: absolute;
    width: inherit;
    height: 100%;   
}

.itemGroupTitle2 {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 140px;
    height: 20px;
}
</style>
<div class="row itemGroup" ng-repeat="item in keyTypes.dataSource">
    <div class="col-sm-2 itemGroupTitle">
        <div class="itemGroupTitle1"><div class="itemGroupTitle2">{{item.GroupName}}></div></div>
    </div>
    <div class="col-sm-10 itemGroupContent">
        <div class="row">
            <div class="col-sm-6 item" ng-repeat="keytype in item.keyTypes">{{keytype.KeyTypeName}}</div>
        </div>
    </div>
</div>
    原文作者:mikeliu
    原文地址: https://segmentfault.com/a/1190000009958348
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞