zoukankan      html  css  js  c++  java
  • div嵌套绝对居中的方法

     方法1:

    .parent {

              800px;

              height:500px;

              border:2px solid #000;

              position:relative;

    }

    .child {

                200px;

                height:200px;

                margin: auto; 

                position: absolute; 

                top: 0; left: 0; bottom: 0; right: 0;

                background-color: red;

    }

    方法2:

    .parent {

                800px;

                height:500px;

                border:2px solid #000;

                display:table-cell;

                vertical-align:middle;

                text-align: center;

            }

            .child {

                200px;

                height:200px;

                display:inline-block;

                background-color: red;

            }

    方法3:

    .parent {

                800px;

                height:500px;

                border:2px solid #000;

                display:flex;

                justify-content:center;

                align-items:center;

            }

            .child {

                200px;

                height:200px;

                background-color: red;

            }

    方法4:

    .parent {

                800px;

                height:500px;

                border:2px solid #000;

                position:relative;

            }

            .child {

                300px;

                height:200px;

                margin:auto;

                position:absolute;/*设定水平和垂直偏移父元素的50%,

    再根据实际长度将子元素上左挪回一半大小*/

                left:50%;

                top:50%;

                margin-left: -150px;

                margin-top:-100px;

                background-color: red;

            }

  • 相关阅读:
    pyinstaller模块
    使用reduce方法数组去重
    Linux的关机与重启命令
    splice和slice的区别
    发现splice的新大陆
    text-decoration和outline
    前端中关于堆和栈的那些事
    git
    前端代码规范
    弹性布局在项目中的使用示例
  • 原文地址:https://www.cnblogs.com/webwangjie/p/6893262.html
Copyright © 2011-2022 走看看