zoukankan      html  css  js  c++  java
  • CSS垂直居中技巧

    <!-- html结构 -->
    <body>
    <div class="wrap">
        <div class="box"></div>
    </div>
    </body>

    /* css样式 */

    /* (1) 模仿单行文字居中的方式 */
    .wrap {
    200px;
    height: 80px;
    line-height: 80px;
    }

    .box {
    display: inline-block;
    vertical-align:middle;
    }

    /* (2) 已知宽高,通过position:absolute; */
    .wrap {
    200px;
    height: 200px;
    position: relative;
    }

    .box {
    100px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -40px;
    }

    /* (3) 未知宽高,通过css3属性 transfrom */
    .wrap {
    200px;
    height: 200px;
    position: relative;
    }

    .box {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    }

    /* (4) 通过flex布局 */
    <!-- html结构 -->
    <body>
    <div class="wrap flexbox flexbox-center flexbox-middle">
        <div class="box"></div>
    </div>
    </body>

    /* css样式 */

    .flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    }

    /* 水平居中 */
    .flexbox-center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    }

    /* 垂直居中 */
    .flexbox-middle {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    }

    佳物不独来,万物同相携。
  • 相关阅读:
    SQL语句常见优化方法
    MySql索引
    Zookeeper学习记录(一):设计与实现
    linux下修改防火墙端口对外开放方法
    Kafka的Producer以及Consumer远程调用问题
    kafka与Spring的集成
    Kafka在Linux环境下搭建过程
    kafka-分布式消息系统
    打字母的游戏&Java入门
    SVN流程图协作图
  • 原文地址:https://www.cnblogs.com/rongrongtu/p/8578943.html
Copyright © 2011-2022 走看看