zoukankan      html  css  js  c++  java
  • 设置div居中显示

    设置宽高
    方法一:
    .container{

    ​ position:absolute;

    ​ 500px;

    ​ height:500px;

    ​ top:50%;

    ​ left:50%;

    ​ transform:translate(-50%,-50%);

    ​ background:#ccc;

    }
    方法二:
    .container{

    ​ 200px;

    ​ height:200px;

    ​ position:absolute;

    ​ top:0;

    ​ left:0;

    ​ right:0;

    ​ bottom:0;

    ​ margin:auto;

    }
    方法三:
    .container{

    ​ 200px;

    ​ height:200px;

    ​ position:absolute;

    ​ background:#ccc;

    ​ top:50%;

    ​ left:50%;

    ​ margin-top:-100px;//设置为宽高的一半

    ​ margin-left:-100px;

    }
    方法四:

    #div1{

    ​ 700px;

    ​ heigth:600px;

    ​ background:orangen;

    ​ display:flex;

    ​ aligin-items:center;

    ​ justify-content:center;

    }

    div2{

    ​ 200px;

    ​ height:200px;

    ​ background:orchild;

    }
    未设置宽高
    方法一:

    box{

    ​ position:flex;

    ​ top:50%;

    ​ left:50%;

    ​ background:#ccc;

    ​ 50%;

    ​ height:50%;

    ​ transform:translateX(-50%) tanslateY(-50%);

    }
    方法二:

    #div1{

    ​ position:fixed;

    ​ 100%;

    ​ height:100%;

    ​ top:0;

    ​ left:0;

    }

    div2{

    ​ position:absolute;

    ​ top:0;

    ​ left:0;

    ​ right:0;

    ​ 50%;

    ​ height:50%;

    ​ margin:auto;

    ​ bottom:0;

    ​ background:#ccc;

    }

  • 相关阅读:
    MySQL之SELECT用法
    Linux中find常见用法示例
    date命令
    backupMysql.sh
    Shell脚本中使用function(函数)示例
    zabbix邮件告警
    Zabbix系统数据采集方法总结
    TOMCAT原理详解及请求过程
    tomcat-users.xml 配置
    zabbix_sender用法实例
  • 原文地址:https://www.cnblogs.com/yuanliy/p/13865981.html
Copyright © 2011-2022 走看看