zoukankan      html  css  js  c++  java
  • 常规的几种居中方案

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    #wrap{
    500px;
    height: 500px;
    background: grey;
    /* position: relative;/**父元素为相对定位,居中基础01*/



    /*居中方案4,flex使用新版本*/
    /*display: flex;/*给父元素设置display*/
    /*justify-content: center;/*水平居中*/
    /*align-items: center;/*垂直居中*//*/*/

    /*居中方案5.flex使用老版本,这个方案不需要给父元素设置相对定位,子元素设置绝对定位*/
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    }
    #wrap .box{
    200px;
    height: 200px;
    background: pink;


    /*position: absolute;*//*子元素为绝对定位 居中基础02*/
    /*top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);居中方案3*/


    /*top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100PX;居中方案2*/


    /*top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;居中方案1*/
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    <div class="box">

    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    占位 CP
    占位 LR
    占位 DL
    占位 SC
    Your name ?
    占位 RK
    Gson 关于SpringMVC和json格式问题
    JDBC
    Outlook2016 2019修改默认存储路径文件夹
    Windows Server 2016 任务管理器没有了远程控制 远程桌面,能够控制其它远程用户的会话
  • 原文地址:https://www.cnblogs.com/dys6/p/11303897.html
Copyright © 2011-2022 走看看