zoukankan      html  css  js  c++  java
  • 【HTML】div居中显示

    方法1:

    .parent {
              width:800px;
              height:500px;
              border:2px solid #000;
              position:relative;
    }
     .child {
                width:200px;
                height:200px;
                margin: auto;  
                position: absolute;  
                top: 0; left: 0; bottom: 0; right: 0; 
                background-color: red;
    }

    方法2:

    .parent {
                width:800px;
                height:500px;
                border:2px solid #000;
                display:table-cell;
                vertical-align:middle;
                text-align: center;
            }
            .child {
                width:200px;
                height:200px;
                display:inline-block;
                background-color: red;
            }

    方法3:

    .parent {
                width:800px;
                height:500px;
                border:2px solid #000;
                display:flex;
                justify-content:center;
                align-items:center;
            }
            .child {
                width:200px;
                height:200px;
                background-color: red;
            }

    方法4:

    .parent {
                width:800px;
                height:500px;
                border:2px solid #000;
                position:relative;
            }
            .child {
                width:300px;
                height:200px;
                margin:auto;
                position:absolute;/*设定水平和垂直偏移父元素的50%,
    再根据实际长度将子元素上左挪回一半大小*/
                left:50%;
                top:50%;
                margin-left: -150px;
                margin-top:-100px;
                background-color: red;
            }
  • 相关阅读:
    面试常见问题
    Servlet上传下载
    Java五大框架
    Jquery
    JavaEE
    Html学习
    JavaSE高级
    面向过程基础
    Java开发软件安装及配置
    JAVA的类加载机制和Class类
  • 原文地址:https://www.cnblogs.com/mqxs/p/8846732.html
Copyright © 2011-2022 走看看