守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 264|回复: 0

[组件样式] 还记得我们折腾过的居中么?DIV垂直居中

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51661
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-11 14:31:10 | 显示全部楼层 |阅读模式

    虽然div中内容上下居中的问题已经是一个比较古老的话题,但是最近发现还是有很多前端开发者在询问如何实现。其实网络上已经有很多资料和案例了,我这里再总结一下几个比较常见的处理方式。

    情形一:div限高,内容长度限一行

    <style>
    .v-align {
        margin: 0 auto;
        width: 200px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        border: 1px solid #ddd;
    }
    </style>
    <!-- html -->
    <div class="v-align">我的内容只能有一行。</div>
    

    valign_1

    情形二:div限高,内容不限

    .v-mult {
        margin: 0 auto;
        width: 200px;
        height: 100px;
        border: 1px solid #ddd;
        overflow: hidden;
    }
    .v-mult .empty,
    .v-mult .text {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        vertical-align: middle;
    }
    .v-mult .empty {
        height: 100%;
    }
    <!-- html -->
    <div class="v-mult">
        <span class="empty"></span>
        <span class="text">我的内容不限,多高都行<br>换行照常</span>
    </div>
    

    valign_2

    情形三:div高度不定,内容高度一定

    .v-auto {
        position: relative;
        margin: 0 auto;
        width: 200px;
        border: 1px solid #ddd;
    }
    .v-auto .text {
        position: absolute;
        top: 50%;
        margin-top: -50px;
        height: 100px;
        border: 1px dashed #ddd;
    }
    <!-- html -->
    <div class="v-auto">
        <div class="text">
            我的高度是固定的,只有100px高,但是我的父及高度不定,我怎么垂直居中呢?
        </div>
        <br><br><br><br><br><br><br><br>
    </div>
    

    valign_3

    情形四:div高度不定,内容高度不定

    .v-auto-out {
        position: relative;
        margin: 0 auto;
        width: 200px;
        border: 1px solid #ddd;
    }
    .v-auto-out .auto-in {
        position: absolute;
        top: 50%;
        border: 1px dashed #ddd;
        /* 这里有兼容性问题 */
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    <!-- html -->
    <div class="v-auto-out">
        <div class="auto-in">我的高度不定,我的父及高度也不定,这下要上下居中,该如何是好?我们一起来瞧瞧吧。</div>
        <br><br><br><br><br><br><br><br><br>
    </div>
    

    valign_4

    好了,知道这四种方式,我相信足以应对日常工作中的各种垂直居中问题。代码很简单,不再做多余阐述。总之一句话,CSS的各个属性样式,就好像人肢体的各个器官,了解了各个器官的功能,才能相互配合完成各种任务。相反,个体的能力是有限的。

    作者博客:百码山庄

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-7-17 14:21 , Processed in 0.038493 second(s), 31 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表